Resize the image to 100% of the height of the div and keep the aspect ratio

Here is a quick sketch.

I would like to ensure that the images in the gallery div are 100% of the height of the gallery div and keep the aspect ratio

and

so that the images resize as you resize the browser.

Is it possible?

Any help would be greatly appreciated.

Here is what I have done so far: www.nulaena.si/photob/.

+3
source share
2 answers

Something like that?

        body {
            padding:0;margin:0;
        }
        #header {
            position: absolute;
            background: orange;
            top:0;
            left:0;
            width: 100%;
            height: 100px;
        }
        #footer {
            position: absolute;
            background: orange;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }
        #middle {
            position: absolute;
            top: 100px;
            bottom: 100px;
            left: 0;
            width: 100%;
        }
        img {
            height:100%;
            width: auto;
        }

<div id="header">header</div>
<div id="middle">
    <img src="images/myImage.jpg" />
</div>
<div id="footer">footer</div>
+2
source

#yourgallerydiv img { height: 100%; } ( width - height) div , , . ( ).

+1

Source: https://habr.com/ru/post/1741299/


All Articles