object-fit: bìa cho hình ảnh

Trong một trang web gần đây mà tôi đã phát triển, yêu cầu là hiển thị hình ảnh (thông qua tiện ích hình ảnh - tức là không phải nền) bên cạnh biểu mẫu chọn tham gia và để hình ảnh tự động chiếm chiều cao bằng với biểu mẫu.

Sau khi thiết lập hiển thị vùng chứa cha của các widget flex , cả hai widget ( section các phần tử nếu sử dụng Genesis) đều có chiều cao bằng nhau.

Nhưng hình ảnh bên trong tiện ích hình ảnh hầu hết sẽ không chiếm toàn bộ chiều cao do tỷ lệ khung hình của hình ảnh.

Vượt qua một cấp trên img phần tử, chúng tôi có thể đặt chiều cao thành 100%..widget-wrap

.after-entry .widget_media_image .widget-wrap {
    height: 100%;
}

Hình ảnh tiếp tục xuất hiện ở trên cùng.

Sẽ thật tuyệt nếu có một cái gì đó tương tự nhưng đối với hình ảnh nội tuyến? May mắn thay, có .background-size: cover object-fit: cover

Thêm

.after-entry .widget_media_image .widget-wrap img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

!important cần cho chiều cao để ghi đè auto giá trị nội tuyến (có thể đến từ WordPress srcset / Jetpack Photon).

Bạn có thể tìm thấy một số cách triển khai thông minh của thuộc tính CSS này trong chủ đề con của Studio Pro cho không chỉ hình ảnh mà còn các phần tử khác như video và iframe.