Thuộc tính object-fit

Thuộc tính object-fit xác định tỷ lệ khung hình hoặc cách co giãn các phần tử như hình ảnh hoặc video.

Cú pháp

bộ chọn {
	object-fit: fill hoặc contain hoặc cover hoặc none;
}

Bảng dưới đây trình bày các giá trị chính cho thuộc tính object-fit:

Giá trị	Mô tả
`fill`	Co giãn phần tử để khớp với kích thước đã chỉ định, trong khi tỷ lệ của phần tử bị bỏ qua.
`contain`	Co giãn phần tử để khớp với kích thước đã chỉ định, trong khi vẫn giữ nguyên tỷ lệ của phần tử.
`cover`	Kích thước phần tử được thay đổi để lấp đầy hoàn toàn vùng đã chỉ định, trong khi vẫn giữ nguyên tỷ lệ của chính phần tử đó.
`none`	Kích thước gốc của phần tử được giữ nguyên.

Hãy đặt cho hình ảnh của chúng ta cách lấp đầy kích thước đã chỉ định mà không giữ nguyên tỷ lệ:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Bây giờ hãy làm sao để hình ảnh lấp đầy vùng chứa đã chỉ định trong khi vẫn giữ nguyên tỷ lệ:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Hãy lấp đầy vùng chứa đã chỉ định bằng hình ảnh của chúng ta sao cho kích thước của chính hình ảnh thay đổi, nhưng vẫn giữ nguyên tỷ lệ của nó:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Hãy chỉ đơn giản đặt hình ảnh của chúng ta vào vùng chứa đã chỉ định với kích thước gốc của nó được giữ nguyên:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}