1

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?

Community
  • 1
  • 1
whiskeySteve
  • 37
  • 7

1 Answers1

2

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.

whiskeySteve
  • 37
  • 7