Hướng dẫn how do i make the background image resize automatically in css? - làm cách nào để tự động thay đổi kích thước hình nền trong css?

Ốp một hình ảnh lớn

Hãy xem xét một hình ảnh lớn, hình ảnh logo Firefox 2982x2808. Chúng tôi muốn (vì một số lý do có thể liên quan đến thiết kế trang web xấu khủng khiếp) để gạch bốn bản sao của hình ảnh này thành một phần tử 300x300 pixel. Để làm điều này, chúng ta có thể sử dụng giá trị background-size cố định là 150 pixel.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Kết quả

Kéo dài một hình ảnh

Bạn cũng có thể chỉ định cả kích thước ngang và dọc của hình ảnh, như thế này:

background-size: 300px 150px;

Kết quả trông như thế này:

Mở rộng một hình ảnh lên

Ở đầu kia của quang phổ, bạn có thể mở rộng một hình ảnh lên nền. Ở đây chúng tôi mở rộng quy mô 32x32 pixel favicon lên 300x300 pixel:

.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

Như bạn có thể thấy, CSS thực sự giống hệt nhau, lưu tên của tệp hình ảnh.

Các giá trị đặc biệt: "Chứa" và "Cover"

Bên cạnh các giá trị ____10, thuộc tính background-size CSS cung cấp hai giá trị kích thước đặc biệt,

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Lưu trữ

Giá trị

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

HTML

<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

Kết quả

Kéo dài một hình ảnh

Bạn cũng có thể chỉ định cả kích thước ngang và dọc của hình ảnh, như thế này:

HTML

<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>

CSS

.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

Kết quả

Kéo dài một hình ảnh