web関連

【css】「transform:scale()」で小さくした要素の余白を無くす方法

2021/02/24

プログラミング

css

CSSの「transform:scale()」を使って要素を小さくしたときに元の大きさ分の余白ができちゃうのでそれを潰したいときの備忘録

SCSSで「transform:scale()」の余白を潰す方法

「SCSS」を使い、変数を利用して「 transform:scale()」でできた余白を潰す方法は以下。

See the Pen
Untitled by twotone (@twotone-me)
on CodePen.

やっていることとしては、画像のサイズに合わせた変数（$widthと$height）と比率の変数（$rate）を用いて、計算しているだけ。

ただ、このやり方だと画像のように決まったサイズのモノにしか対応ができない。もし、動的に「 transform:scale()」の余白を潰したいのであればjavascriptで実装する必要がある。

javascriptを使って動的に「 transform:scale()」の余白を潰すなら以下参考。