CSS object-fit property dùng để kiểm soát cách ảnh hoặc video thay đổi kích thước cho vừa hộp nội dung. Thuộc tính này cung cấp nhiều cách để lấp đầy hộp nội dung. Ví dụ như giữ nguyên tỷ lệ khung hình hoặc kéo dài nội dung.
Thêm vào đó vị trí căn chỉnh nội dung của phần tử được thay thế có thể điều chỉnh. Ta dùng thuộc tính object-position để làm điều này. Hướng dẫn này cung cấp cái nhìn sâu sắc về thuộc tính object-fit. Nó bao gồm cú pháp giá trị và các ví dụ thực tế.
Tìm hiểu về thuộc tính object-fit
Cú pháp:
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Giá trị thuộc tính:
Mỗi giá trị thuộc tính xác định một cách khác nhau để thay đổi kích thước nội dung. Việc này được thực hiện bên trong hộp.
1. fill: Đây là giá trị mặc định. Hình ảnh được thay thế sẽ bị kéo dài để vừa với hộp nội dung. Hình ảnh sẽ lấp đầy hoàn toàn hộp bất kể tỷ lệ khung hình.
Cú pháp:
object-fit: fill;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành fill.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: Fill;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
2. contain: Hình ảnh được thay thế giữ nguyên tỷ lệ khung hình gốc. Nó vẫn vừa với hộp nội dung.
Cú pháp:
object-fit: contain;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành contain.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
3. cover: Giá trị này cũng giữ nguyên tỷ lệ khung hình gốc. Hình ảnh được thay thế vừa với hộp nội dung. Đôi khi nó bị cắt để vừa khi tỷ lệ khung hình không khớp.
Cú pháp:
object-fit: cover;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành cover.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
4. none: Hình ảnh được thay thế sẽ bỏ qua tỷ lệ khung hình gốc. Do đó nó không bị thay đổi kích thước.
Cú pháp:
object-fit: none;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành none.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
5. scale-down: Hình ảnh được thay thế được thay đổi kích thước như thể none hoặc contain được chỉ định. Kết quả là kích thước đối tượng nhỏ nhất.
Cú pháp:
object-fit: scale-down;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành scale-down.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 200px;
object-fit: scale-down;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
6. initial: Nó được sử dụng để đặt giá trị mặc định. Tức là hình ảnh được thay thế được kéo dài để vừa với hộp nội dung. Giá trị mặc định là fill.
Cú pháp:
object-fit: initial;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành initial.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
img {
width: 200px;
height: 400px;
object-fit: initial;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</body>
</html>
Kết quả:
7. inherit: Inherit nhận thuộc tính từ phần tử cha. Khi nó được sử dụng với phần tử gốc thuộc tính initial sẽ được dùng.
Cú pháp:
object-fit: inherit;
Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính object-fit. Giá trị của nó được đặt thành inherit.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | The object-fit Property </title>
<style>
.object {
object-fit: none;
}
img {
width: 200px;
height: 400px;
object-fit: inherit;
}
</style>
</head>
<body>
<div class="object">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
alt="GeeksforGeeks"
width="667"
height="184">
</div>
<!--Here img inherits property from parent i.e none from class object-->
</body>
</html>
Kết quả:
Thuộc tính CSS object-fit cung cấp cách linh hoạt để kiểm soát việc thay đổi kích thước ảnh và video. Việc này diễn ra bên trong hộp nội dung của chúng. Bằng cách sử dụng các giá trị như fill contain cover none scale-down initial và inherit. Các nhà phát triển có thể đảm bảo các phần tử hiển thị chính xác trên các thiết bị khác nhau. Hiểu và sử dụng object-fit hiệu quả có thể cải thiện đáng kể tính thẩm mỹ và chức năng trang web. Hãy thử nghiệm với các ví dụ để xem từng giá trị ảnh hưởng đến việc thay đổi kích thước.
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính object-fit được liệt kê bên dưới:
- Google Chrome 32.0
- Firefox 36.0
- Microsoft Edge 79.0
- Opera 19.0
- Safari 10.0