CODEWITHSUNDEEP
imagecss
stefanie
stefanie

Reputation: 39

full width, limited height image while maintaining aspect ratio

I'm trying to recreate an image to look like the cover image here. The image has to be the full width of the browser but still maintaining a certain fixed height. With all that, it must still maintain aspect ratio.

Setting width: 100%; height: auto; makes the image full-width with the right aspect ratio. However, the height is off. If I set width: 100%; max-height: 300px;, the aspect ratio is lost.

I'm sure it's possible (see link above) but I just can't figure out how to get this result. Would appreciate some pointers!

Upvotes: 0

Views: 3768

Answers (1)

m.spyratos
m.spyratos

Reputation: 4238

You have to "cut" the part of the image that exceeds the fixed height. So set this styling to the parent container of the image:

#image-container { height: 300px; overflow:hidden; }

jsFiddle

Upvotes: 1

Related Questions