带有引导程序和/或 jquery 的响应式缩略图？（动态调整大小？）答案

【问题标题】：Responsive thumbnails with bootstrap and/or jquery? (Dynamically resize?)带有引导程序和/或 jquery 的响应式缩略图？（动态调整大小？）
【发布时间】：2013-03-29 03:53:02
【问题描述】：

我以为我之前已经解决了这个问题，但我想没有。

在我的示例中： http://jsfiddle.net/VDtgT/31/

我原以为在 span div 中调用的图像会受到 div 的最大高度和最小高度设置的约束/调整大小？

我基本上打算有一行带有单个图像的 DB 输出，但它需要根据窗口的大小缩放该图像。

HTML：

<div id="wrap">

<!-- *** TOP ROW -->
<div class="row-fluid show-grid">
<div class="span12" style="background-color: yellow;" align="center">HEADER ROW</div>
</div> 



<!-- *** MIDDLE ROW --->
<div class="row-fluid">

    <div class="span4 boxitup">
    <a href="#"> <img src="http://placehold.it/150x150" alt="img1"></a> 
    </div>
<div class="span4 boxitup">Column 2</div>
<div class="span4 boxitup">Column 3</div>
</div>    


    </div> <!-- /close wrap --> 

<div id="push"></div>

<!-- FOOTER BEGIN --> 

<div id="footer">

<div class="row-fluid">
<div class="span12" style="background-color: yellow;" align="center">
    Footer row
</div>
</div>
    </div>

javascript：

$( document ).ready( function(){
setMaxHeight();
$( window ).bind( "resize", setMaxHeight );  

function setMaxHeight() {
$( ".boxitup" ).css( "min-height", ($(window).height() / 7) + "px" );   
$( ".boxitup" ).css( "max-height", ($(window).height() / 7) + "px" );   
}
});

【问题讨论】：

标签： jquery twitter-bootstrap responsive-design thumbnails image-resizing

【解决方案1】：

如果您只想让图像填充其封闭框，只需将以下内容添加到您的 css 中：

img {
      height:100%;
}

您可以查看结果here in my fork of your jsFiddle。

【讨论】：

【解决方案2】：

您设置的最大和最小高度相同，当我打开演示时是 42px。

为了不看到大于容器的内容，您需要设置 css overflow:hidden。

您所看到的只是溢出。不完全清楚为什么要定位行而不是图像，或者为什么要设置相同的最大和最小高度

【讨论】：