[DOM_Style] JS - aspectRatio 속성 - 요소의 종횡비율(= 가로세로비율) 지정 (= aspectRatio속성 = 애스펙트레이시오속성)

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>

 

결과보기