Question

我正在努力创建一个响应式图库。我正在使用CSS和bootstrap，我尝试使用标签和背景，我无法让它工作。

所以，这就是我想要实现的目标：

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

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

当您使浏览器更加精简时，图像宽高比保持不变，只有尺寸发生变化，之后每行得2个，我可以使用col-lg-4 col-md-6等... < / p>

如果我能用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

正如你所说，使用bootstrap的.col课程是这里的方法：这是一个可调整大小的jsfiddle：https://jsfiddle.net/aL1ndzgg/1/

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

因此，只要图像源为方形，图像就会调整为其引导网格

您还可以尝试以下操作：CSS Tricks: Responsive Images

CSS响应图像网格

2 个答案: