Thuộc tính kích thước nền kiểu DOM HTML được sử dụng để đặt hoặc lấy kích thước của hình nền.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính backgroundSize -
object.style.backgroundSize = "auto|length|cover|contain|intial|inherit"
Thuộc tính
Các thuộc tính trên được giải thích như sau -
| Sr.No | Thuộc tính &Mô tả |
|---|---|
| 1 | auto Hình nền hiển thị ở kích thước đầy đủ và nó là giá trị mặc định. |
| 2 | chiều dài Để thiết lập chiều rộng và chiều cao của hình nền. Giá trị đầu tiên là chiều rộng và giá trị thứ hai là chiều cao. Nếu chỉ có một giá trị được cung cấp thì giá trị bị thiếu sẽ mặc định là tự động. |
| 3 | phần trăm Để thiết lập chiều rộng và chiều cao của hình nền theo tỷ lệ phần trăm. Tỷ lệ phần trăm được tính dựa trên chiều cao và chiều rộng của bố mẹ. Giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được cung cấp thì giá trị bị thiếu sẽ mặc định là tự động. |
| 4 | cover Để chia tỷ lệ hình ảnh nền lớn nhất để bao phủ toàn bộ khu vực nền. |
| 5 | chứa Để chia tỷ lệ hình ảnh sao cho chiều cao và chiều rộng của nó có thể vừa với bên trong vùng nội dung. |
| 6 | ban đầu Để đặt thuộc tính này thành giá trị ban đầu. |
| 7 | inherit Để kế thừa giá trị tài sản mẹ |
Ví dụ
Hãy cùng chúng tôi xem xét ví dụ về thuộc tính HTML DOM style backgroundSize -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
box-shadow: 0 2px 0 4px mintcream;
padding: 45px;
background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
background-size: 150px 150px;
}
</style>
<script>
function changeBackSize(){
document.getElementById("DIV1").style.backgroundSize="100px 100px";
document.getElementById("Sample").innerHTML="The background image size is now reduced";
}
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>Change the background image size for the above div by clicking the below button</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI KÍCH THƯỚC -
