CODEWITHSUNDEEP
jqueryhtmlcss
ptinca
ptinca

Reputation: 334

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

Here is a quick sketch.

I would like to achieve that images in the gallery div will be 100% of the height of the gallery div and keep the aspect ratio

AND

that images would resize as you would change the size of browser.

Is this possible?

Any help would be much appreciated.

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

Upvotes: 3

Views: 11009

Answers (2)

user113716
user113716

Reputation: 322452

Something like this?

        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>

Upvotes: 2

Dave Everitt
Dave Everitt

Reputation: 17856

use #yourgallerydiv img { height: 100%; } (although width is preferable - I haven't tested for height) for the image tag inside your gallery div, and size the images large enough to fill a large screen depth so they do not pixellate when enlarged. Images sized in percentages enlarge when the parent element enlarges (if that is also given a percentage).

Upvotes: 1

Related Questions