Thuộc tính HTML DOM Style objectFit trả về và sửa đổi cách thay đổi kích thước phần tử hình ảnh hoặc video trong tài liệu HTML để phù hợp với phần tử vùng chứa của nó.
Cú pháp
Sau đây là cú pháp -
1. Trả về objectFit
object.objectFit
2. Sửa đổi objectFit
object.objectFit = “value”
Đây, giá trị có thể -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| không | Trong đó, nội dung không được thay đổi kích thước. |
| điền | Trong đó, nội dung có kích thước để lấp đầy hộp nội dung của phần tử và nếu cần, đối tượng sẽ được kéo căng hoặc thu nhỏ để vừa với hộp nội dung. |
| chứa | Trong đó, nội dung được chia tỷ lệ để duy trì tỷ lệ co trong khi vừa vặn trong hộp nội dung của phần tử trong tài liệu HTML. |
| bìa | Trong đó, nội dung được định kích thước hoặc cắt bớt để duy trì tỷ lệ co trong khi vừa vặn toàn bộ hộp nội dung của phần tử trong tài liệu HTML. |
| giảm quy mô | Trong đó nội dung có kích thước. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính HTML DOM Style objectFit -
Ví dụ
<!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">DOM Style objectFit Property Demo</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()">Set objectFit</button>
<script>
function set() {
document.querySelector('.img-class').style.objectFit = "contain";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt objectFit ”Để đặt thuộc tính phù hợp đối tượng trên phần tử hình ảnh -
