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

尚未測試