이미지 1:1 비율하는 법

🌟 이미지 1:1 비율하는 법

⬜️ HTML

<div class="square">
  <img src="image.jpg" alt="Image">
</div>

⬜️ CSS

.square {
  width: 300px; /* 원하는 너비 */
  height: 0;
  padding-bottom: 100%; /* 너비의 100% 만큼 높이 설정 */
  position: relative;
}

.square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

원하는 이미지를 div 요소 안에 포함시키고, div 요소에 원하는 너비를 설정한 다음 padding-bottom 속성을 사용하여 높이를 설정한다.
padding-bottom 값은 너비 값의 100%로 설정하여 요소의 높이를 너비와 같은 비율로 만든다.
이미지를 절대 위치로 설정하여 div 요소의 상단 왼쪽 모서리에 배치하고, 이미지의 너비와 높이를 100%로 설정하여 요소의 너비와 높이에 꽉 차게 표시된다.

✅ 사용 예시

.sc-pick .thumb-area {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}
.sc-pick .thumb-area img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

💡 만약 이미지가 잘려도 되고 이미지의 원본 비율을 유지하면서 1:1 비율을 유지하려면 img에 object-fit: cover을 주면 된다.
object-position을 사용해 이미지를 중앙에 배치할 수도 있다.