通过CSS按比例缩放图像高度，并带有溢出功能：隐藏在Fluid Grid中

Question

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

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

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

Answer 1

您可以通过检查window.onresize事件上图像的大小并使用此答案中提供的代码，通过JavaScript（jQuery）动态地调整容器的高度。

这将是代码的模型：

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

尚未测试