반응형
이미지 업로드를 했는데 해당 영역에 꽉 차게 들어가느라 비율이 깨지는 경우가 발생한다
이때 가장 간단한 방법으로 CSS를 사용해서 비율이 깨지지 않도록 해보자
object-fit
속성 값
| contain | 콘텐츠의 가로 세로 비율을 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로 세로 비율을 유지하게 되므로, 서로의 가로 세로 비율이 일치하지 않으면 객체가 "레터박스"처럼 됩니다. |
| cover | 대체 콘텐츠의 가로 세로 비율을 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로 세로 비율이 일치하지 않으면 객체 일부가 잘려나갑니다. |
| fill | 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로 세로 비율이 일치하지 않으면 콘텐츠가 늘어납니다. |
| scale-down | none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다. |
| none | 대체 콘텐츠의 크기를 조절하지 않습니다. |
이미지, 비디오 태그에 사용
IE 미지원
반응형
'CSS' 카테고리의 다른 글
| [#. CSS] Progress Bar Pointer 막대 바에서 특정 수치, 값 위치(포인터) 찍기 (0) | 2022.03.16 |
|---|---|
| [#. flex] flex-flow, flex-wrap을 사용해서 flex 아이템 줄 바꿈 설정, 한 줄에 div 개수 지정하기 (0) | 2022.03.11 |
| [#. CSS] Canlendar UI(HTML5 + CSS + JS) 달력 UI (0) | 2021.07.14 |
| [#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 (0) | 2021.01.12 |
| [#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image (1) | 2020.12.24 |
