web関連

【css】scale()で小さくした要素の余白を失くしたい

2021/02/24

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

CSSだけで余白を潰す方法

まずはデモ

HTML

<div class="wrap">
	<div class="scale-element">テキスト</div>
</div>

SCSS

$width: 100px;
$height: 100px;
$rate: 0.5;
.wrap{
	height:$height * $rate;
	width:$width * $rate;
}
.scale-element{
	background:white;
	border:solid 1px black;
	height:$height;
	width:$width;
	transform-origin:left top;
	transform: scale($rate);
}

やってることはシンプルで親と子要素(scale対象)を用意してscaleした後のサイズを「子要素のサイズ × scale値」で求めて、親要素に反映し余白を潰してるだけ

一つ注意しないといけないのが%みたいに親要素に依存するような相対単位を使うと上手くいかない
というのも、今回の例だと「100px(子要素のサイズ) × 0.5(scale値)」でscale後のサイズが50pxになるんだけど、scale対象の子要素で幅高さ100%を使うと四辺が25pxになってしまう(上記のコードでは50pxになる)

要するに、親要素にscale後のサイズ(50px)を指定→子要素が親要素(50px)を対象にscale(0.5)→四辺が25pxになる、ということ
%のような相対単位を指定すると親要素基準になってしまうのでpxなどの絶対単位を使う必要性がある

モノによってはCSSだけで済まないものもあると思うんだけど、その時はjQueryとかで幅と高さを上書きする必要があると思う
とりあえず、scale後の要素を親要素で囲み絶対単位(px)とかを使って物理的にscale後の余白を潰すのが手っ取り早いと思う

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。