CSS响应式图像网格

Question

我正在努力创建响应式图片库。 我正在使用CSS和bootstrap，我尝试使用标记，并且作为背景，我无法使其正常工作。

因此，这就是我要实现的目标：

https://www.socialprintstudio.com/products/

图像网格没有图像扭曲或重叠

当您使浏览器更小时，图像的长宽比保持不变，只有大小发生变化，之后每行便得到2，这是我可以使用col-lg-4 col-md-6等实现的。

如果我可以使用img标签执行此操作，我也希望这样做，因为我认为在悬停时将一个图像淡化为另一个图像更容易。

这是我的HTML

<div class="item " data-categoryid="2">
    <div class="item-image">
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon2.jpg&quot;); display: none;"></div>
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon.jpg&quot;);"></div>
    </div>
        <div class="item-name">Some name</div>             
        <div class="item-price">price €</div>
        <div class="item-button">
            <a href="#" class="btn btn-primary">Button.</a>
        </div>
</div>

Answer 1

正如您所说，使用引导程序的.col类是这里的方法：这是一个可调整大小的jsfiddle： https ://jsfiddle.net/aL1ndzgg/1/

除非您同时指定宽度和高度，否则默认情况下，图像将保持其纵横比。

对于悬停效果，每个框只能将其中一张图像设置为position: absolute; ; 这样，其他图像将设置框的大小。

 .single-image-container { margin-bottom: 20px; position: relative; } .single-image-container img { width: 100%; } .blocker { position: relative; overflow: hidden; } .hover-image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 125ms ease-in-out; } .single-image-container:hover .hover-image { opacity: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> <div class="col-xs-6 col-md-4 single-image-container"> <div class="blocker"> <img src="http://placehold.it/400x400" alt="img"> <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2"> </div> </div> </div> </div> 

Answer 2

要使图像具有响应性，请添加以下CSS：

.item img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

因此，只要图像源是正方形的，图像就会调整到其引导网格的大小

您也可以尝试以下操作： CSS技巧：响应式图像