【javascript】scaleで小さくした要素の高さを求める方法

cssのscaleで要素を縮小した時にscale前の要素の高さが適用されて、変な隙間ができるので、scale後の高さを計算してその高さを縮小した要素に適用して変な隙間を潰したときの備忘録

scale後の要素の高さの計算方法

以下の計算で求められる

要素の高さ * 縮小率 = 縮小後の要素の高さ

例えば、高さが300pxで縮小率が0.5倍だとすると縮小後の要素の高さは150pxであるとわかる

300px(要素の高さ) * 0.5(縮小率) = 150px(縮小後の要素の高さ)

これを使ってscale後の要素の高さを取得する

scale後の高さを計算して要素間の隙間を消す

親要素と子要素が必要

親要素…scaleを適用、scale後の高さを適用
子要素…縮小したい要素

デモ

<style>
.scale-parent{
    transform:scale(.5);/* 縮小 */
    transform-origin: 0% 0%;/* 基点を操作（左上） */
}
</style>

<div class="scale-parent">
	<div class="scale-child">長方形だよ</div>
</div>
<div>長方形の次の要素だよ</div>


<script>
var parent = document.querySelector(".scale-parent");
var child = document.querySelector(".scale-child");
// scale後の高さを計算してstyle属性で追加
parent.style.height = child.clientHeight * 0.5 + "px";
</script>

jQueryで書くならこう

jQuery(function($){
	$(".scale-parent").height($(".scale-child").height() * 0.5 + "px");
});

実際に使うときは子要素は既存の要素で、親要素を追加する感じで実装する機会が多いい