css-background-size-and-cover-100-of-difference - ty le keo ma cao

Hôm nay khi đang làm việc với ứng dụng mini-program, tôi đã sử dụng một hình ảnh làm nền cho phần tử view. Tuy nhiên, tôi nhận thấy rằng hình ảnh nền không hiển thị đầy đủ mặc dù tôi đã áp dụng CSS đại lý cá độ với thuộc tính:

background-size: cover;

Trước đây, tôi chưa bao giờ gặp phải tình huống này rồng hồ khi sử dụng thuộc tính trên. Sau khi kiểm tra kỹ lưỡng, tôi phát hiện ra hai trường hợp sau:

• Khi vùng view lớn, hình ảnh nền không cần thiết phải hiển thị toàn bộ.
• Trong trường hợp vùng view nhỏ hơn so với kích thước của hình ảnh nền, thì hình ảnh nền không được hiển thị hoàn chỉnh.

Sau khi thay đổi sang:

background-size: 100% 100%;

Thì vấn đề đã được giải quyết và hình ảnh hiển thị bình thường. Do đó, tôi đã tổng hợp lại sự khác biệt giữa hai phương pháp này.

Trường hợp sử dụng 100%

Khi bạn muốn đảm bảo rằng hình ảnh nền sẽ luôn hiển thị đầy đủ trong phạm vi của phần tử view, hãy sử dụng:

background-size: 100% 100%;

Tuy nhiên, cách này có thể gây biến dạng hình ảnh nếu tỷ lệ khung chứa không khớp với tỷ lệ của hình ảnh.

Trường hợp sử dụng cover

Khi hình ảnh nền không nhất thiết phải hiển thị hoàn chỉnh mà chỉ cần lấp đầy toàn bộ khu vực của phần tử div, hãy sử dụng:

background-size: cover;

Cách này giúp hình ảnh giữ nguyên tỷ lệ khung hình ban đầu, nhưng một phần của hình ảnh có thể bị cắt bỏ để đảm bảo rằng nó phủ kín toàn bộ phần tử chứa.

Nói chung, hình ảnh sẽ được phóng to hoặc thu nhỏ sao cho các cạnh nội bộ của nó chạm vào các cạnh của phần tử chứa, điều này có nghĩa là một phần của hình ảnh có thể bị che khuất.