반응형 콘텐츠에 이미지 삽입하기

반응형 이미지를 삽입해야 하는 이유
먼저 반응형 이미지를 삽입해야 하는 이유부터 알아보겠습니다. 이미지는 웹 페이지의 용량 중 가장 큰 비중을 차지하는데요! 브라우저에서 콘텐츠를 렌더링(Rendering)할 때 불필요한 큰 이미지를 다운로드 하거나 똑같은 이미지를 여러 크기로 다운로드 하는 것은 웹 페이지의 성능을 떨어뜨리는 가장 큰 원인이 됩니다.

또한, 과거와 달리 현재는 스마트폰, 태블릿 등과 같은 다양한 기기에서 웹 페이지를 이용할 수 있게 되어 대부분의 웹 사이트가 사용자의 원활한 접근을 위해 반응형 웹을 지원하고 있습니다.

하지만 마크업 개발자들에게 이렇게 다양한 기기에 대응하며 이미지를 삽입하는 것은 보통 힘든 일이 아니었죠..🤨

1. object-fit

object-fit 속성은 , 와 같은 콘텐츠의 크기를 어떤 방법으로 조절하여 요소에 맞출 것인지 지정할 수 있습니다. object-fit: cover를 이용하면 이미지의 가로, 세로 비율은 그대로 유지하면서 컨테이너에 가득 차도록 설정할 수 있습니다.

img {width: 100%; height: 200px; object-fit: cover;}

object-fit 속성

• cover : 이미지의 종횡비를 유지한 채 컨테이너 영역 내 여백이 없도록 이미지를 확대합니다. 종횡비가 일치하지 않는 경우 이미지 일부가 잘릴 수 있습니다.

 img {width: 100%; height: 200px; object-fit: cover;}

• contain : 이미지의 종횡비를 유지한 채 크기를 조절하여 컨테이너 영역 내에 전체 이미지가 보이도록 조절합니다. 종횡비가 일치하지 않을 경우 컨테이너 내 여백이 생길 수 있습니다.

img {width: 100%; height: 200px; object-fit: contain;}

• fill : object-fit 속성의 기본 값으로, 종횡비와 상관 없이 컨테이너의 크기에 맞춰 이미지를 가득 채웁니다. 이미지의 가로 세로 비율은 유지되지 않습니다.

  img {width: 100%; height: 200px; object-fit: fill;}

  
- none: 이미지 크기를 조절하지 않고, 본래의 이미지 사이즈를 유지합니다.

img {width: 100%; height: 200px; object-fit: none;}

- scale-down : none과 contain 중 이미지의 크기가 더 작은 값을 자동으로 선택합니다.

img {width: 100%; height: 200px; object-fit: scale-down;}

  
##   2. background-size