반응형비율 : 화면비 aspect-ratio

aspect-ratio 는 디스플레이 가로와 세로길이의 비율을 말한다.
반응형으로 작업하다보면 width의 길이가 가변할떄, 컨텐츠의 비율에따라 height가 조정이 되어야 찌그러지지않는다.
이럴때 이 속성을 사용하면 편하다. 즉 aspect-ratio 는 자동 크기 및 기타 레이아웃 기능 계산에 사용된다.

각설하고 사용방법은 다음과 같다.

<div class="imgWrapper">
	<img src="http://placehold.it/320x100" alt="이미지">
</div>

<style>
	.imgWrapper{
    	width:320px;
        height:100px;
    }
    @media screen and (max-width: 767px){
    	.imgWrapper{
        	width:100%;
            height:auto;
            position:relative;
            aspect-ratio: 320 / 100;
        }
    }
    
    img{
    	position:absolute;
        left:0;
        bottom:0;
        right:0;
        top:0;
    }
</style>

aspect-ratio = 가로크기 / 세로크기

---

이 코드에서는,

이미지를 감싸고있는 div에 반응형시 aspect-ratio 를 준다.
이떄 값은 원래 이미지의 가로크기 / 세로크기를 부여하면 된다.

주의할점은 width나 height가 고정이라면 비율에 따라 줄어들지 않는다.
또한 기존css작성시 이미지를 감싸고있는 div에 position:relative;를 하지않았다면 그 안의 이미지가 부모를 인식하지 못해 비율에따라 반응하지못한다.

---

사용을하다보니,,

aspect-ratio는 반응형시 보통 width값에따라 height를 정비율로 같이 줄어들게끔 하는 경우가 많다.

width: 200px;
/* height:250px; */
aspect-ratio: 1 / 1.25;

@media screen and (max-width: 1024px) {
	width:100%;
}

가로200px; 세로250px;로 유지한채 정비율로 줄어들게하고싶을떄,
가로에만 고정값을 부여하고 세로값대신 aspect-ratio로 비율을 부여한다.(250/200 = 1.25 이므로 1/1.25)
반응형시 줄어들떄 가로값만 조정하면 세로는 알아서 그 비율대로 줄어든다.