aspectRatio 예제 - 요소의 종횡비 설정
<style>
#box {
height: 300px;
width: 300px;
margin: auto;
border: 1px solid gray;
position: relative;
}
#hz {
width: 100%;
aspect-ratio: 1;
border: 1px solid gray;
background-color: pink;
}
#hz_ori {
position: absolute;
z-index: -1;
opacity: 0.5;
width: 100%;
aspect-ratio: 1;
border: 1px solid grey;
background-color: silver;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="box">
<div id="hz_ori">hz_ori</div>
<div id="hz">hz</div>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.aspectRatio = "2/1";
}
</script>
결과보기
