Thuộc tính objectFit của Style trong HTML DOM trả về và cho phép sửa đổi cách một phần tử hình ảnh hoặc video trong tài liệu HTML được thay đổi kích thước để vừa với phần tử chứa của nó.
Cú pháp
Cú pháp như sau:
1. Lấy giá trị objectFit
object.objectFit
2. Thiết lập objectFit
object.objectFit = "value"
Ở đây, value có thể là:
| Giá trị | Giải thích |
|---|---|
| initial | Đặt thuộc tính này về giá trị mặc định. |
| inherit | Kế thừa giá trị thuộc tính từ phần tử cha. |
| none | Nội dung không được thay đổi kích thước. |
| fill | Nội dung được dimension để lấp đầy hộp nội dung của phần tử, và nếu cần thiết, đối tượng sẽ bị kéo dãn hoặc nén để vừa với hộp nội dung. |
| contain | Nội dung được tỷ lệ để giữ tỷ lệ khung hình trong khi vừa với hộp nội dung của phần tử. |
| cover | Nội dung được dimension hoặc cắt xén để giữ tỷ lệ khung hình trong khi lấp đầy toàn bộ hộp nội dung của phần tử. |
| scale-down | Nội dung được dimension nhỏ nhất giữa none và contain. |
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính objectFit của Style:
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.img-class {
width: 200px;
height: 250px;
}
</style>
<body>
<h1 style="text-align:center">Demo thuộc tính objectFit của Style</h1>
<img alt="Learn Time Series" src="https://www.tutorialspoint.com/time_series/images/time-series-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="set()">Thiết lập objectFit</button>
<script>
function set() {
document.querySelector('.img-class').style.objectFit = "contain";
}
</script>
</body>
</html>
Kết quả
Nhấn vào nút "Thiết lập objectFit" để đặt thuộc tính object-fit trên phần tử hình ảnh:
