Question

我正在使用Andy Taylor（cssgrid.net）的1140网格，并有一个图片库。我在图像上使用max-width:100% & height:auto来获取我正在寻找的宽度缩放。

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

有什么想法？提前谢谢。

Answer 1

您可以使用JavaScript（jQuery）调整容器的高度，方法是检查window.onresize事件上的图片大小，并使用this answer中提供的代码。

这将是代码的模型：

<强> 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);
}

尚未经过测试

通过带有溢出的CSS按比例缩放图像高度：隐藏在流体网格中

1 个答案: