拡大縮小された CSS 要素の周囲の空白を削除するにはどうすればよいですか?

スケールされた CSS 要素の周囲の空白を解決する

CSS 要素にスケール変換を適用すると、要素の周囲に空白が表示される場合があります。スケーリングされた要素。これは、スケーリングは要素のレンダリング サイズには影響しますが、物理的なサイズには影響せず、周囲のスペースが空のままになるためです。

問題の理解

スケールなどの CSS 変換では、周囲の要素を元の位置に残したまま、要素のレンダリングされたコンテンツ (背景要素や子要素を含む) を 1 つの単位として移動します。これにより、スケーリングされた要素の周囲に空きスペースができます。

解決策

空白を削除するには、要素のレンダリング サイズをスケーリングされたサイズと一致するように調整する必要があります。これは、幅や高さなどの 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 中国語 Web サイトの他の関連記事を参照してください。