CODEWITHSUNDEEP
javascripthtmlcss
Mr. Dizzy
Mr. Dizzy

Reputation: 43

What is the best way to handle variable height images when overflow-x is set to hidden

I've got a very high resolution image which is meant to be displayed on any size monitor. The height is to always show in its entirety and the width will be scrollable via JavaScript. The containing element will have an overflow-x set to hidden. My question is how to best handle a variable height and still maintain the correct proportions.

Thanks for any help.

Upvotes: 0

Views: 80

Answers (2)

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

If you only set one of the dimensions (height or width, max and min also apply), the other will be scaled proportionally and maintain the aspect ratio.

Upvotes: 1

walmik
walmik

Reputation: 1452

You can try using the max-height property. The value can be in pixels or percent.

max-height: 100%

Or

max-height: 200px; /* whatever height */

This will constrain the image proportionally.

Upvotes: 0

Related Questions