Reputation: 39
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
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; }
Upvotes: 1