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

Question

I am using the 1140 grid by Andy Taylor (cssgrid.net), and have an image gallery. I am using max-width:100% & height:auto on the images which gets the width scaling I am looking for.

What I would like to do is limit the height of the DIV that contains the image. My first attempt was to set the height to a fixed size and use overflow:hidden . This works when the page is viewed at full size, but as the page scales down, the image reduces in size, showing more of the image. What I would like is for the height of the containing DIV with the overflow to scale proportionally with the width of the image.

Any thoughts? Thanks in advance.

Answer 1

You can resize the container's height dinamically with JavaScript (jQuery) by checking the size of the image on window.onresize event and using the code provided in this answer .

This would be a mockup of the code:

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

has not been tested