Question

我的设计遇到了麻烦，并且已经用尽了我的选择。基本上我正在通过Bootstrap框架进行设计，以制作一组具有悬停叠加效果的图像。效果和响应式图像在分离时工作正常，但在组合时，我失去了对它的响应性并且它保持固定为300px x 250px大小。

这是我想要实现的效果类型（http://mikekus.com/portfolio）

我已将代码添加到jsfiddle：http://jsfiddle.net/2BuDG/而没有bootstrap.css（因为它是一个巨大的文件）

HTML

<div class="container-fluid">
<div class="row">


<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3"> 
<div class="view view-first">  
     <img src=" SOURCE " class="img-responsive"/>  
 <div class="mask">  
 <h2>Vector Illustrations</h2>  
 <p>Illustration, Print, Digital Art</p>  
     <a href="#" class="portfolioButton">View Project</a>  
 </div>  
</div>  
</div>

CSS

.view {

   width: 300px;
   height: 250px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {

   width: 300px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
  display: block;
  max-width: 100%;
  height: 100%; 

}

我喜欢默认的img bootstrap类的“img-responsive”类如何工作，但是添加了overlay div，它不起作用。我想我几乎就在那里，但我脑筋急转直下。提前谢谢！

Answer 1

如果你看一下你所链接的投资组合的代码，你会看到：

<li>
    <a href="/portfolio/Title">
    <img src="SOURCE" class='js-img'>
        <div class="excerpt">
            <h3>Title</h3>
            <p>Blah blah blah</p>
        </div>
    </a>
</li>

作者永远不会为<li>元素分配固定的宽度或高度。他设置width: 25%以保留每行四张图片并指定max-width: 480px他还在width: 100%元素上设置<img>。

他使用媒体查询来更改<li>元素的宽度和最大宽度，具体取决于屏幕大小。您可以使用Bootstrap的以下部分来帮助您创建用于调整投资组合元素大小的媒体查询断点：

http://getbootstrap.com/css/#grid-less

您可能希望将div和imgs设置为基于可变百分比的宽度而不是固定宽度。

通过Bootstrap使图像/文本悬停叠加完全响应

1 个答案: