Hình nền css chiều cao đầy đủ

Ahmad Shadeed là một nhà thiết kế UX và nhà phát triển front-end đến từ Palestine. Anh ấy thích làm việc với các dự án thiết kế và phát triển front-end đầy thách thức. Anh ấy đã viết một … Thông tin thêm về Ahmad ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Giao diện người dùng SmashingConf 2023

• 
  Bắt đầu miễn phí

• 
  Hệ thống thiết kế thành công

• 
  SmashingConf Freiburg 2023

• 
  Danh sách kiểm tra thiết kế giao diện thông minh

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Không phải lúc nào chúng tôi cũng có thể tải các hình ảnh có kích thước khác nhau cho một phần tử HTML. Nếu chúng tôi sử dụng chiều rộng và chiều cao không tỷ lệ với tỷ lệ khung hình của hình ảnh, hình ảnh có thể bị nén hoặc kéo dài. Điều đó không tốt, và nó có thể được giải quyết bằng cách sử dụng

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Đầu tiên, hãy xác định vấn đề. Xét hình sau

Tại sao chuyện này đang xảy ra?

Một hình ảnh sẽ có tỷ lệ khung hình và trình duyệt sẽ lấp đầy hộp chứa bằng hình ảnh đó. Nếu tỷ lệ khung hình của hình ảnh khác với chiều rộng và chiều cao được chỉ định cho nó, thì kết quả sẽ là hình ảnh bị nén hoặc kéo dài

Chúng ta thấy điều này trong hình sau

Giải pháp

Không phải lúc nào chúng ta cũng cần thêm hình ảnh có kích thước khác khi tỷ lệ khung hình của hình ảnh không khớp với chiều rộng và chiều cao của phần tử chứa. Trước khi đi sâu vào các giải pháp CSS, tôi muốn cho bạn thấy cách chúng tôi đã từng làm điều này trong các ứng dụng chỉnh sửa ảnh

Bây giờ chúng ta đã hiểu cách thức hoạt động của nó, hãy tìm hiểu cách thức hoạt động của nó trong trình duyệt. (Cảnh báo tiết lộ. Nó dễ hơn. )

CSS .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }2

Thuộc tính

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

Hãy đi qua các giá trị có thể

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Giá trị có thể có cho .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }2

.card__thumb img { aspect-ratio: 4 / 3; }4

Trong trường hợp này, hình ảnh sẽ được thay đổi kích thước để phù hợp với tỷ lệ khung hình của vùng chứa. Nếu tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa, thì nó sẽ được đóng hộp chữ

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb img { aspect-ratio: 4 / 3; }6

Tại đây, hình ảnh cũng sẽ được thay đổi kích thước để phù hợp với tỷ lệ khung hình của vùng chứa và nếu tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa, thì nó sẽ được cắt bớt cho phù hợp.

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb img { aspect-ratio: 4 / 3; }8

Với điều này, hình ảnh sẽ được thay đổi kích thước để phù hợp với tỷ lệ khung hình của vùng chứa nó và nếu tỷ lệ khung hình của hình ảnh không khớp với tỷ lệ khung hình của vùng chứa, thì nó sẽ bị nén hoặc kéo dài. Chúng tôi không muốn điều đó

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }80

Trong trường hợp này, hình ảnh sẽ không bị thay đổi kích thước, không bị kéo giãn hay bị nén. Nó hoạt động giống như giá trị

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Ngoài

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Giá trị có thể cho .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }84

Thuộc tính

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Các từ khóa

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CSS .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }3

Với

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Giá trị có thể có cho .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }3

Các giá trị có thể có của

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }80

Với

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }82

Tại đây, hình ảnh sẽ được thay đổi kích thước để phù hợp với vùng chứa. Nếu tỷ lệ khung hình không giống nhau, thì hình ảnh sẽ được che cho phù hợp

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }84

Trong trường hợp này, hình ảnh sẽ được thay đổi kích thước để vừa với vùng chứa. Nếu tỷ lệ khung hình bị tắt thì hình ảnh sẽ có hộp chữ như minh họa trong ví dụ tiếp theo

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Đối với

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Khi nào thì không nên sử dụng .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }2 hoặc .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }3

Nếu phần tử hoặc hình ảnh được cung cấp chiều cao cố định và áp dụng

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

Xem xét ví dụ sau trong đó hình ảnh có chiều cao cố định

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Nếu vùng chứa của thẻ quá rộng, nó sẽ dẫn đến những gì chúng ta thấy ở bên phải (hình ảnh quá rộng). Đó là bởi vì chúng tôi không chỉ định tỷ lệ khung hình

Chỉ có một trong hai bản sửa lỗi cho điều này. Đầu tiên là sử dụng hack đệm để tạo tỷ lệ nội tại

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Cách khắc phục thứ hai là sử dụng thuộc tính CSS mới

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Ghi chú. Tôi đã viết chi tiết về bất động sản

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Các trường hợp sử dụng và ví dụ

Hình đại diện người dùng

Trường hợp sử dụng hoàn hảo cho

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Danh sách Logo

Liệt kê các khách hàng của một doanh nghiệp là quan trọng. Chúng tôi sẽ thường sử dụng logo cho mục đích này. Vì các logo sẽ có các kích cỡ khác nhau, nên chúng tôi cần một cách để thay đổi kích thước của chúng mà không làm biến dạng chúng

Rất may,

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

Hình thu nhỏ bài viết

Đây là một trường hợp sử dụng rất phổ biến. Vùng chứa cho hình thu nhỏ của bài viết có thể không phải lúc nào cũng có hình ảnh có cùng tỷ lệ khung hình. Sự cố này phải được hệ thống quản lý nội dung (CMS) khắc phục ngay từ đầu, nhưng không phải lúc nào cũng vậy

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

nền anh hùng

Trong trường hợp sử dụng này, quyết định sử dụng phần tử

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• Hình ảnh có quan trọng không?
• Hay mục đích của hình ảnh chỉ đơn thuần là trang trí?

Dựa trên câu trả lời của chúng tôi, chúng tôi có thể quyết định sử dụng tính năng nào. Nếu hình ảnh là quan trọng

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Nếu hình ảnh mang tính trang trí, chúng ta có thể sử dụng

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CSS ngắn hơn trong trường hợp này. Đảm bảo rằng mọi văn bản được đặt trên hình ảnh đều có thể đọc được và truy cập được

Thêm nền vào hình ảnh với .card__thumb img { aspect-ratio: 4 / 3; }4

Bạn có biết rằng bạn có thể thêm màu nền cho

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Trong ví dụ bên dưới, chúng ta có một lưới các hình ảnh. Khi tỷ lệ khung hình của hình ảnh và vùng chứa khác nhau, màu nền sẽ xuất hiện

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

Phần tử video

Bạn đã bao giờ cần một

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb img {
    aspect-ratio: 4 / 3;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Để làm cho nó bao phủ toàn bộ chiều rộng và chiều cao của cha mẹ, chúng ta cần ghi đè giá trị mặc định

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Phần kết luận

Như chúng ta đã thấy, cả

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Lời nhắc thân thiện về ý nghĩa trợ năng của việc chọn giữa phần tử

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}