object-fit
이미지 추가 및 태그 추가 예정
contain
가로세로비를 유지하면서, 이미지 태그 안에 전체가 보여지도록 크기가 조절된다. 나머지 영역은 빈 공간으로 보인다.
<img width="300" height="300" src="image/path.png"
style="object-fit: contain; border: 1px solid black;" />
cover
가로세로비를 유지하면서, 빈 공간 없이 이미지 태그를 가득 채운다. 안보이는 영역이 생길 수 있다.
<img width="300" height="300" src="image/path.png"
style="object-fit: cover; border: 1px solid black;" />
fill
이미지 태그 크기에 맞게 빈 공간 없이 가로세로비를 유지하지 않고 전체 이미지가 보이도록 크기를 조절한다.
<img width="300" height="300" src="image/path.png"
style="object-fit: fill; border: 1px solid black;" />
none
크기 조절하지 않는다.
<img width="300" height="300" src="image/path.png"
style="object-fit: none; border: 1px solid black;" />
scale-down
none과 contain 중 이미지 크기가 더 작은 것으로 표현한다.
<img width="300" height="300" src="image/path.png"
style="object-fit: scale-down; border: 1px solid black;" />