CSS 이미지 비율 주는 방법

padding을 이용한 이미지 비율 정하는 방법

• 👉 레거시 코드에서 많이 사용되었다.
• container
  1. 이미지를 감싸는 요소의 높이를 0으로 주고 패딩 위 또는 아래로 너비의 비율과 같게 값을 준다.
  2. div는 블록요소이므로 이미지 한줄에 하나씩밖에 위치하지 못하므로 한줄에 여러줄을 주기위해서는 display: inline-block을 준다.
  3. img에서 position: absolute를 사용하기위해 container에서 position을 relative로 준다.
• img
  1. position: absolute와 top:0, left:0을 주어 부모위치의 왼쪽상단에 위치하도록 한다.
  2. 이미지의 너비와 높이를 100%로 주어 부모 영역을 채운다.
  3. 이미지가 흐려진다면 object-fit: cover를 해준다.

aspect-ratio를 이용한 이미지 비율 정하는 방법

• 👉 가장 많이 사용되고있다.
• aspect-ratio: 1 / 1
• 이미지가 흐려진다면 object-fit: cover를 해준다.