지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다.
background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정
background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내..
hyoni-k.tistory.com
이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다.
object-fit : 이미지에 object-fit 지정
ㅡ Values (초기 값: fill)
contain : 이미지(대체 컨텐츠)의 종횡비를 유지하면서 (요소 컨텐츠) 박스 내부에 들어가도록 크기를 맞춤 조절
cover : 이미지의 종횡비를 유지하면서 박스를 가득 채움. *종횡비가 일치하지 않으면 객체 일부가 잘림
fill : 박스 크기에 맞춰 이미지 크기를 조절하며 박스를 가득 채움. *종횡비가 일치하지 않으면 이미지가 늘어남
none : 이미지 크기를 조절하지 않음
scale-down : none과 contain 중 이미지의 크기가 더 작아지는 값에 따름
코드 및 적용 결과
See the Pen object-fit by hyoeun (@hyonixk) on CodePen.
object-position : 이미지 컨텐츠 배치 (위치 지정)
ㅡ Values (초기 값: 50% 50%)
<position>values
object-position: 50% 50%;
object-position: center top;
object-position: 100px 50px;
Global values
object-position: inherit;
object-position: initial;
object-position: unset;
코드 및 적용 결과
See the Pen object-position by hyoeun (@hyonixk) on CodePen.
참고 MDN, CSS-TRICKS
'Web design > HTML & CSS' 카테고리의 다른 글
CSS의 새로운 기능 (2022 구글 I/O 주요 기능) (4) | 2022.06.17 |
---|---|
[CSS] Position : Sticky (0) | 2021.02.20 |
[CSS속성] 텍스트를 강조하는 방법 (0) | 2020.12.03 |
CSS Preprocessor, SASS, SCSS (0) | 2020.10.15 |
길이 "단위"에 대하여 (0) | 2020.08.13 |