[CSS] 이미지 수정하기 ( object-fit: cover; )

내가 원하는 것: 
이미지 변형 안오게 하고 정사각형 안에 들어가게 하기

이미지 비율 이상

현재 상태의 html

  <!-- 정사각형 -->
      <div class="square-flex">
        <div class="square">
          <div class="overlay-wrap">
            <div class="overlay">
              <p>햄버거</p>
              <p>KRW 5,500</p>
            </div>
          </div>
          <img src="img/hamburger1.png" />
        </div>
        <div class="square">
          <div class="overlay-wrap">
            <div class="overlay">
              <p>트리플 치즈버거</p>
              <p>KRW 6,000</p>
            </div>
          </div>
          <img src="img/hamburger2.png" />
        </div>
        <div class="square">
          <div class="overlay-wrap">
            <div class="overlay">
              <p>더블 치즈버거</p>
              <p>KRW 6,000</p>
            </div>
          </div>
          <img src="img/hamburger3.png" />
        </div>
      </div>

CSS

/* 정사각형 */
.square-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .square {
    position: relative;
    width: 375px;
    height: 375px;
    border: 1px solid $main_color;
    margin: 20px;
    img {
      // object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .overlay-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    .overlay {
      color: white;
    }
  }
}

저기 이미지 부분에 주석처리를 풀어주면

원하는 비율의 이미지로 된다.

 

= object-fit: cover;을 사용하면 이미지를 정사각형 안에 맞추면서 비율이 유지

= 이미지의 일부가 잘릴 수 있지만, 이미지가 왜곡되지 않고 정사각형 내에 가득 채워짐.

---

object-fit: cover;

 

object-fit: cover;는 CSS 속성 중 하나로,

이미지나 비디오 등의 콘텐츠를 그 부모 요소 안에 어떻게 맞출지 결정하는 데 사용됩니다.

이 속성은 주로 img 또는 video 태그와 함께 사용되며,

그 안의 콘텐츠가 어떤 방식으로 영역에 맞춰질지 지정합니다.

object-fit 속성의 값들

• fill: 콘텐츠가 부모 요소의 크기에 맞게 늘어나거나 줄어듭니다. 이때 원본 비율은 유지되지 않고 왜곡될 수 있습니다.
• contain: 콘텐츠가 부모 요소에 맞도록 비율을 유지하면서 축소 또는 확대됩니다. 콘텐츠의 전체가 부모 요소 안에 들어가며, 요소와 콘텐츠 사이에 빈 공간이 남을 수 있습니다.
• cover: 콘텐츠가 부모 요소의 크기를 채우기 위해 비율을 유지하면서 확대됩니다. 요소의 모든 영역을 덮지만, 콘텐츠의 일부가 잘릴 수 있습니다.
• none: 콘텐츠가 원본 크기 그대로 표시됩니다. 부모 요소의 크기에 따라 잘리거나 일부만 보일 수 있습니다.
• scale-down: none과 contain 중에서 작은 크기를 선택하여 콘텐츠를 표시합니다.

object-fit: cover;의 특징

object-fit: cover;는 콘텐츠의 원본 비율을 유지하면서

부모 요소의 크기에 맞게 확대 또는 축소되도록 합니다.

이 과정에서 부모 요소를 완전히 채우기 위해 콘텐츠의 일부가 잘릴 수 있지만,

왜곡 없이 자연스러운 크기로 표시됩니다.

object-fit: cover;의 활용

• 갤러리 또는 카드 레이아웃: 정사각형 또는 일정한 비율의 이미지 갤러리에서
• 각 이미지를 균일한 크기로 표시하면서 왜곡을 피하고 싶을 때 사용됩니다.
• 배경 이미지처럼 사용: 이미지가 부모 요소의 배경처럼 보이도록 할 때,
• 공간을 모두 채우면서 비율을 유지해야 하는 상황에서 유용합니다.

주의사항

• 콘텐츠의 중요한 부분이 잘릴 수 있으므로, 콘텐츠의 중심이 잘리지 않도록 디자인하는 것이 좋습니다.
• 부모 요소의 크기가 고정되어 있지 않다면, 반응형 디자인에서 콘텐츠의 잘림이 예측하기 어려울 수 있습니다.

object-fit: cover;는 매우 유용한 속성이며,

이미지 또는 비디오를 정해진 크기 내에서 왜곡 없이 자연스럽게 보여주고자 할 때 자주 사용됩니다.