CODEWITHSUNDEEP
htmlcssimageresponsive-design
Andrej Tihonov
Andrej Tihonov

Reputation: 669

Responsive image (width and height)

I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:

img {
    max-width: 75%;
    height: auto;
}

So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?

With regards,

Andrej

Upvotes: 0

Views: 2703

Answers (4)

William Dexter
William Dexter

Reputation: 1

try this way: img{max-width:100%; max-height:100%;}

Upvotes: 0

Andrej Tihonov
Andrej Tihonov

Reputation: 669

Ok, I have found a solution. I just set the max-height with the vh units (viewport height). Thx for your help.

Upvotes: 1

mik01aj
mik01aj

Reputation: 12372

Simple:

max-height: 100%; /* or a bit less */

But note what the docs say:

The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.

Upvotes: 1

ShivangiBilora
ShivangiBilora

Reputation: 3060

did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!

Because u just need to set either of the two, and the other adjusts accordingly...

Upvotes: 1

Related Questions