CSS đối tượng phù hợp và vị trí đối tượng thuộc tính giúp chúng tôi cắt hình ảnh và chỉ định cách nó được hiển thị trong một phần tử.
Cú pháp của thuộc tính CSS object-fit như sau -
Selector {
object-fit: /*value*/
object-position:/*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính phù hợp đối tượng CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
object-fit: cover;
}
img:last-of-type {
object-fit: contain;
}
</style>
</head>
<body>
cover
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
contain
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<style>
div {
border: 1px solid blue;
width:100%;
height:300px;
}
img {
float:left;
width:50%;
height:100%;
object-fit:cover;
object-position: 20px -10px;
}
</style>
<body>
<div >
<img src="https://images.unsplash.com/photo-1611800065908-
233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" />
<img src="https://images.unsplash.com/photo-1612626256634-
991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ảnh hưởng của việc thay đổi kích thước
