[HTML] 이미지 비율 설정하여 보여주는 방법

안녕하세요! 오늘도 열심히 개발중에 있습니다. 이번에 이미지를 보여주는 프론트엔드 작업을 하다가 사수 분으로부터 좋은 꿀팁을 선사받았습니다. 바로 이미지 비율을 설정하는 방법인데요. 오늘은 그 방법에 대해서 알아보겠습니다

 

이미지 비율 설정하기

<div class="img-responsive" style="padding:unset;position:relative;
background-image:url('[이미지 주소]')"><svg viewBox="0 0 16 16">
  <rect width="16" height="16" style="fill:rgba(255,255,255,0);"></rect>
</svg></div>

이미지 주소 부분만 수정해서 넣어주시면 됩니다. rect 태그를 통해서 비율을 설정하는데요. width와 height 비율을 조정하기 그것을 감싸는 div 부분에 이미지를 배경으로 지정한 뒤 style에 viewBox 부분에서 다시 비율을 설정하시면 됩니다.

 

 

비율대로 잘 나오는 모습을 볼 수 있습니다 (위의 사진은 16:12 비율로 설정하였습니다