2

How to keep correct ratio (1:1.67 - e.g. width:300px/height:500px) of inner div in responsive environment where its height is 90% of outer (containing) div’s height? Preferably using CSS/LESS only.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Zel
  • 407
  • 1
  • 5
  • 12
  • http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div is that what you mean? – gaynorvader Apr 14 '14 at 16:03
  • Play around with the dimensions http://jsfiddle.net/QNjxw/ – Zach Saucier Apr 14 '14 at 16:04
  • possible duplicate of [Responsively change div size keeping aspect ratio](http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) – zzzzBov Apr 14 '14 at 16:09
  • @Zach Saucier - In that example inner width is given as a percentage of outer div's width and then height managed through padding-bottom. I need it other way around. - Height given as a percentage (90%) of outer div's width and then width determined as 60% of inner div's height! – Zel Apr 14 '14 at 16:15
  • The technique to keep aspect ratio with CSS (linked in comments above) is based on the width of the element. You can't use that technique if you want to keep aspect ratio based to the height of element. – web-tiki Apr 14 '14 at 16:19
  • @ web-tiki I am sure you can with the help of LESS variables. – Zel Apr 14 '14 at 16:23
  • @zzzzBov yes, padding-top percentages are relative to width, but I don't have width but height. So it isn't a duplicate! – Zel Apr 14 '14 at 16:26
  • @Zel, can you add some more details (preferably images) to show what exactly you're looking for. It's hard to tell from the way you've phrased things. – zzzzBov Apr 14 '14 at 16:28
  • I am not used to LESS so I can't say, (Even though I doubt a LESS stylesheet can retrieve height of an element and have actions on elements according to that height). I was just saying that your question wans't a duplicate of the ones linked above; – web-tiki Apr 14 '14 at 16:28
  • @web-tiki I agree with you - this is a different question altogether. I love that 'bottom-padding standing in for height' responsive technique and I use it all the time, but this Q is based on height. ;-) – Zel Apr 14 '14 at 16:33
  • @web-tiki re:LESS - I didn't mean to retrieve height of an element. I was hoping I could save 90% as a LESS variable and then use it to calculate inner div's width, maintaining the aspect ratio. – Zel Apr 14 '14 at 16:40

1 Answers1

1

The top and bottom padding of an element are relative to its width so you can use that to maintain it.

I made a little demo of this pretty recently here: http://jsbin.com/lizopahu/11/edit

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
  • That works when inner width is given as a percentage of outer div's width and then height managed through padding-bottom. I need it other way around. - Height given as a percentage (90%) of outer div's width and then width determined as 60% of inner div's height! – Zel Apr 14 '14 at 16:16