Sự khác biệt giữa background-size: 100% và cover trong CSS

Ngày cập nhật: 20/08/2020
Lượt xem: 5124
Số từ: 254
Thể loại: CSS

Hôm nay khi đang sử dụng hình ảnh làm nền cho một phần tử view trong ứng dụng nhỏ (mini program), tôi gặp phải tình trạng hình nền không hiển thị đầy đủ. Tôi đã sử dụng thuộc tính CSS sau:

1

background-size: cover;

Tuy nhiên, đây là lần đầu tiên tôi gặp lỗi như vậy. Sau khi kiểm tra kỹ lưỡng, tôi nhận ra rằng:

• Trong những trường hợp vùng view lớn, việc hiển thị toàn bộ hình nền không cần thiết, nên cover hoạt động bình thường.
• Ngược lại, khi vùng view rất nhỏ, trong khi hình nền có kích thước lớn hơn, thì chỉ một phần của hình nền được hiển thị.

Khi tôi thay đổi sang:

1

background-size: 100% 100%;

hình nền liền ngay lập tức được hiển thị đầy đủ. Từ đó, tôi quyết định tổng hợp lại sự khác biệt giữa hai giá trị này.

Bạn nên sử dụng giá trị này nếu bạn bắt buộc muốn hình nền hoàn toàn hiển thị, bất kể kích thước của phần tử chứa. Tuy nhiên, nhược điểm là hình ảnh có thể bị biến dạng do được dãn theo chiều rộng và chiều cao của phần tử mà không giữ nguyên tỷ lệ khung hình.

Ví dụ:

1
2
3
4

.view {
  background-image: url("hinh-anh.jpg");
  background-size: 100% 100%;
}

Khi nào nên dùng background-size: cover

Giá trị này phù hợp với các trường hợp bạn muốn hình nền phủ kín phần tử chứa, nhưng không yêu cầu hiển thị toàn bộ hình ảnh. Hình nền sẽ được co giãn sao cho vừa khít phần tử, giữ nguyên tỷ lệ khung hình, do đó có thể bị cắt bớt ở một hoặc cả hai bên.

Ví dụ:

1
2
3
4

.view {
  background-image: url("hinh-anh.jpg");
  background-size: cover;
}

Nói cách khác, cover giống như việc bạn phóng to hình ảnh đến mức các cạnh trong cùng tiếp xúc với mép phần tử, dẫn đến việc một phần hình ảnh có thể bị che khuất.

Kết luận

• Dùng 100% 100% nếu bạn cần toàn bộ hình nền xuất hiện, chấp nhận việc bị biến dạng.
• Dùng cover nếu bạn muốn phủ kín phần tử, nhưng không quan trọng việc một phần hình ảnh bị ẩn đi.

Hiểu rõ sự khác biệt này sẽ giúp bạn chọn lựa đúng giá trị để đạt hiệu quả tối ưu trong từng trường hợp cụ thể!