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

【问题标题】：Make div with image/text hover overlay fully responsive through Bootstrap通过 Bootstrap 使带有图像/文本悬停覆盖的 div 完全响应
【发布时间】：2014-05-07 05:30:50
【问题描述】：

我的设计遇到了障碍，并且已经用尽了我的选择。本质上，我正在通过 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 引导类的“img-responsive”类的工作方式，但添加了覆盖 div 后，它就不起作用了。我想我快到了，但我已经为此努力放屁了。提前致谢！

【问题讨论】：

如果涉及 HTML 或 CSS 的问题有一个 jsfiddle（或等效的）并且您的代码已经到位并且失败了，这将很有帮助。
我将代码添加到 jsfiddle 中。我正在使用引导框架，我认为没有必要在其中包含整个 css 文件，因为它很大。我添加了一个“灵感”链接，说明我希望这个设计最终如何发挥作用。希望这会有所帮助

标签： html css twitter-bootstrap

【解决方案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 他还在<img> 元素上设置width: 100%。

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

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

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

【讨论】：