반응형 사이트에서 이미지 크기 맞추기

반응형 사이트에서 이미지 크기 문제점❗❗

width나 height에 150px 등 고정값을 준다면 쉽게 정사각형을 만들 수 있다.
하지만 반응형 웹페이지에서는 값을 %로 주기 때문에 문제가 생긴다.
사용자가 보는 화면이 직사각형인데, 가로 길이가 30%, 세로 길이가 30%라고 해도 정사각형이 되지 않기 때문이다.

padding-top/bottom 사용✨

• padding-top 또는 padding-bottom을 사용, padding 값은 요소의 width를 참조한다!
  
  
• width 값이 100px이고 padding이 20%라면 px로 계산해서 20px이 되는것이다!
  
  
• width 값이 100%이고 padding-bottom 을 100%로 적용한다면 width:100%를 참조하여
  width 크기와 동일하게 padding-bottom이 셋팅된다.
  
  
• padding-top을 56.25%을 주게 되면 16:9로 보인다!
  
  
• height:0을 주면 박스 모델 높이에 영향을 주는 것이 padding-top 뿐이다.
  
  

비율 계산하기🧮

비율을 구하는 방법은 calc를 이용한다.

padding-bottom: calc((520/1097)*100%);

이미지의 가로가 1097px이고 세로가 520px이라면
(세로/가로) * 100 을 해주면 된다!