Resizing background images with background-size

Lặp lại một hình ảnh lớn

Hãy xem xét một hình ảnh lớn — một hình logo Firefox 2982x2808 pixel. Chúng ta muốn (vì một lý do nào đó liên quan đến thiết kế trang web rất tệ) lặp lại bốn bản sao của hình ảnh này vào 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 giãn 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ư sau:

background-size: 300px 150px;

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

Phóng to một hình ảnh

Ở chiều ngược lại, bạn có thể phóng to một hình ảnh trong nền. Ở đây chúng ta phóng to một favicon 32x32 pixel 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 thấy, CSS thực ra về cơ bản là giống hệt nhau, ngoại trừ tên của tệp hình ảnh.

Các giá trị đặc biệt: contain và cover

Ngoài các giá trị <length>, thuộc tính CSS background-size còn cung cấp hai giá trị kích thước đặc biệt là contain và cover. Hãy cùng xem xét những giá trị này.

contain

Giá trị contain chỉ định rằng, bất kể kích thước của hộp chứa, hình ảnh nền nên được thu/phóng sao cho mỗi cạnh lớn nhất có thể mà không vượt quá chiều dài của cạnh tương ứng của vùng chứa. Hãy thử thay đổi kích thước ví dụ bên dưới để thấy điều này hoạt động.

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;
  resize: both;
  overflow: scroll;
}

Kết quả

cover

Giá trị cover chỉ định rằng hình ảnh nền nên được điều chỉnh kích thước để nhỏ nhất có thể trong khi vẫn đảm bảo cả hai chiều đều lớn hơn hoặc bằng kích thước tương ứng của vùng chứa. Hãy thử thay đổi kích thước ví dụ bên dưới để thấy điều này hoạt động.

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;
  resize: both;
  overflow: scroll;
}

Kết quả

Xem thêm

• background-size
• background
• Module CSS backgrounds and borders
• Scaling SVG backgrounds