响应式非等大小图片库

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>

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;