0

我以为我以前解决过这个问题，但我想没有。

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

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

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

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" );   
}
});
4

2 回答 2

0

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

img {
      height:100%;
}

您可以在我的 jsFiddle 分支中查看结果。

于 2013-04-06T20:58:24.303 回答
0

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

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

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

于 2013-04-06T20:58:59.347 回答