Tôi có một danh sách các hình có chứa hình nền. Một cái gì đó như sau:
<ul>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
</ul>
Mỗi hình ảnh này background-sizeđược đặt thành covervà background-attachmentđặt thành fixed.
figure {
width: 100%;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
Khi mỗi hình chiếm toàn bộ khung nhìn, điều này hoạt động tốt, nhưng nếu có sự chênh lệch nào đó thì hình nền sẽ bị cắt bớt.
Theo như tôi có thể nói thì đây là do thiết kế ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values ).
Tôi muốn các hình ảnh được kẹp theo chiều dọc hoặc chiều ngang nhưng không phải cả hai và được căn giữa bằng kích thước của chính hình đó.
Tôi biết có các giải pháp javascript nhưng có cách nào để thực hiện việc này bằng cách sử dụng CSS không?
Đây là một ví dụ hoạt động: http://codepen.io/Godwin/pen/KepiJ
