Question

我使用的是安迪·泰勒（cssgrid.net）的1140网格，并且有一个图片库。我正在使用＜code＞最大宽度：100%&；height:在图像上自动，这得到了我想要的宽度缩放。

我想做的是限制包含图像的DIV的高度。我的第一次尝试是将高度设置为固定大小，并使用溢出：隐藏。当以全尺寸查看页面时，这是有效的，但随着页面的缩小，图像的大小会减小，显示更多的图像。我想要的是包含溢出的DIV的高度与图像的宽度成比例。

有什么想法吗？提前谢谢。

Answer 1

您可以使用JavaScript（jQuery）通过检查window.onsize事件，并使用这个答案。

这将是一个代码的模型：

HTML:

<div class="image-gallery">
    <div class="image"><img src="" /></div>
</div>

JS：

window.onresize = function(event) {
    var imgwidth = $( .image img ).width();
    var imgheight = $( .image img ).height();
    var divwidth = $( .image ).width();
    var divheight = divwidth*imheight/imgwidth; //Aspect Ratio conversion
    $( .image ).height(divheight);
}

尚未测试

友情链接