[CSS] img 태그에 overflow hidden 효과를 적용해보자!

🧐이런 경험 없나요?

크기가 정해져 있는 div 박스에 이미지를 넣고 싶어서 해당 img의 CSS 스타일에 width: 100%; height: 100%를 적용했는데 화질이 깨져서 고민했던 적이 있지 않으신가요?! 그래서 부모div에 overflow: hidden을 넣어본 적이 있진 않으신가요!!! (근데 당연히 적용 안 됨)

💡Object-fit 속성

그러한 상황에 너무나도 좋은 CSS 속성을 가져왔습니다!
바로바로 obejct-fit입니다!!

• object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.
• object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.

object-fit 속성에는 다음 5가지의 값을 할당할 수 있습니다!

1. fill: 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다. (참고로 이게 default 속성이라 그동안 우리가 넣은 이미지의 화질이 깨지는 경험을 한 것입니다ㅜㅜ)

2. contain: 대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됩니다.

3. cover: 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다. (저는 이걸 정말 자주 쓰는 것 같아요!)

4. none: 대체 콘텐츠의 크기를 조절하지 않습니다.

5. scale-down: none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.

🎇여기서 체험해보세요!

https://developer.mozilla.org/ko/docs/Web/CSS/object-fit