html - 响应式不等尺寸图片库

Question

您好一直在研究此https://codepen.io/junedc/pen/yqXVaR以做出响应但无济于事。如果我删除高度或更改为百分比图像丢失。

<div class="gallery-height">
<div class="img" style="height:125px; "></div>
<div class="img" style="height:400px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office1.jpg');"></div>
<div class="img" style="height:130px;"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office2.jpg');"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office3.jpg');"></div>

标签： htmlcssflexbox

Answer 1

如果你真的必须将它用作 css 中的背景图像，这是我喜欢在我的项目中使用的一个技巧：

url('http...') no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;