뒤늦게 알아서 뼈아픈 유용한 CSS : aspect-ratio

뒤늦게 알아서 뼈아픈 유용한 css 시리즈는 내가 2년넘게 스스로 홈페이지 구축을 해오다 늦게 알아버린 css 모음이다. 또 까먹어서 어마어마한 시간을 들여 이 작은 css 한개를 구현하는 것을 막고자 블로그에 담는다.

---

aspect-ratio

aspect-ratio는 이미지나 객체의 비율을 지정해 반응형 등을 직관적으로 다룰 수 있게 도와준다.

div { 
  width: 100px;
  aspect-ratio: 4 / 3; /* 4:3 비율*/
}

img, input[type="image"], video, embed, iframe, marquee, object, table 
{
  aspect-ratio: attr(width) / attr(height);
}

---

호환성 : IE 빼고 전부 가능