[ aspect-ratio ] 반응형 비율을 유지해주는 css 신기능

div { aspect-ratio: 16 / 9; width: 500px; background: #cccccc;}

 

aspect-ratio: 16 / 9 

한줄만 넣으면 아래와 같은16:9 비율의 div가 만들어집니다.

 

 

div 뿐만 아니라 이미지, 테이블 등 모든 태그가 가능합니다.

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

당연히 익스플로러는 지원 안됨