CSS
객체 맞춤 및 배치

비고

물체 적합

object-fit 속성은 높이와 너비가 설정된 상자에 요소를 맞추는 방법을 정의합니다. 일반적으로 이미지 또는 비디오에 적용되는 Object-fit은 다음 5 가지 값을 허용합니다.

가득 따르다

object-fit:fill;

채우기는 이미지의 원래 종횡비에 관계없이 내용 상자에 맞게 이미지를 늘입니다.

있다

object-fit:contain;

포함은 이미지의 종횡비를 유지하면서 이미지를 상자의 높이 또는 너비에 맞 춥니 다.

덮개

object-fit:cover;

Cover는 전체 상자를 이미지로 채 웁니다. 이미지 종횡비는 유지되지만 이미지는 상자 크기로 잘립니다.

없음

object-fit:none;

없음은 상자의 크기를 무시하고 크기가 조정되지 않습니다.

축소

object-fit:scale-down;

Scale-down은 객체를 none 또는 none 로 크기를 지정 contain . 이 옵션을 선택하면 이미지 크기가 작아집니다.