如何刪除縮放 CSS 元素周圍的空白？

解決縮放CSS 元素周圍的空白

對CSS 元素應用縮放轉換時，可能會導致在縮放的CSS 元素周圍出現空白縮放元素。這是因為縮放會影響元素的渲染大小，但不會影響其物理大小，從而使周圍的空間留空。

理解問題

CSS 轉換，例如縮放，將元素的渲染內容（包括其背景和子元素）作為一個單元移動，同時將周圍元素保留在其原始位置。這會導致縮放後的元素周圍出現空白區域。

解決方案

要刪除空白區域，您需要調整元素的渲染大小以符合其縮放後的大小。這可以使用寬度和高度等 CSS 屬性來實現。具體方法如下：

CSS 解決方案：

<code class="css">.quarter.scale-thumb {
  width: 60%; // Adjusted width to match scaled size
  height: 60%; // Adjusted height to match scaled size
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}</code>

JavaScript 解決方案：
或者，您可以使用JavaScript應用轉換後手動調整元素的大小：

<code class="javascript">document.querySelector('.quarter.scale-thumb').style.width = '60%';
document.querySelector('.quarter.scale-thumb').style.height = '60%';</code>

透過調整縮放元素的寬度和高度，您可以消除多餘的空白並確保縮放後的內容緊貼其預期空間。

以上是如何刪除縮放 CSS 元素周圍的空白？的詳細內容。更多資訊請關注PHP中文網其他相關文章！