CODEWITHSUNDEEP
htmlaspect-ratio
whiskeySteve
whiskeySteve

Reputation: 37

Scale a div length-wise; preserve aspect ratio

SO: I've spent a number of hours tackling this design problem but can't seem to find a precise answer. I'm attempting to scale a div to fit a designated height but constrain its aspect ratio. See example: http://jsfiddle.net/ks2jH/121/

Based on my research, the discussion has sort of been had all over the place, including here. Trouble is, the div only resizes & constrains based on the browser's width, and not its height.

The two closest solutions I found work for width: (1) use the :after pseudo-class http://jsfiddle.net/ks2jH/89/, or (2) use a blank/transparent png [http://jsfiddle.net/ks2jH/94/].

The idea, of course, is to achieve the same thing without specifying a width because it auto adjusts based on the height.

Thoughts?

Upvotes: 1

Views: 419

Answers (1)

whiskeySteve
whiskeySteve

Reputation: 37

Did it, using jQuery.

http://jsfiddle.net/5TETn/210/

I was able to modify an aspect ratio script [see:http://jsfiddle.net/Mottie/5TETn/8] by Mottie over at GitHub to achieve what CSS alone couldn't. Much gratitude, kind sir.

Upvotes: 2

Related Questions