html - 通过 Bootstrap 使带有图像/文本悬停覆盖的 div 完全响应

Question

我的设计遇到了障碍，并且用尽了我的选择。本质上，我正在通过 Bootstrap 框架进行设计，以制作一组图像，每个图像都应用了悬停叠加效果。效果和响应式图像在分开时效果很好，但在组合时，我失去了对它的响应性，它保持固定在 300 像素 x 250 像素大小。

这是我想要实现的效果类型 ( 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”类的工作方式，但添加了覆盖 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 和 img 设置为基于可变百分比的宽度而不是固定宽度。