0

I need to preserve the aspect ratio of a div when the browser window is resized.

I have done a good bit of searching on this, and it is possible to use padding to preserve the aspect ratio of a div by making its height relative to its width, whenever the width of the screen is altered.

The technique is shown here on Stack Overflow, and in particular, this linked to example shows the technique in action.

But I need to do the opposite. Rather than making the height relative to the width of the div, I need the width of the div to change whenever the height of the browser window is altered. I need to do this because I have a background image that I want the content to flow relative to, and that background image has a 100% height, and its aspect ratio is preserved.

I have tried using linked method, but swapping horizontal for vertical attributes. It isn't working. I have no idea why. Perhaps someone can show how to do this.

Community
  • 1
  • 1
breakingbits
  • 103
  • 2

2 Answers2

1

I need the width of the div to change whenever the height of the browser window is altered.

For a pure CSS solution to that, you will have to wait for a broader implementation of either calc() or the vh unit.

CBroe
  • 91,630
  • 14
  • 92
  • 150
0

I don't know if this is possible in pure CSS, but there is a possible way with jQuery, see this discussion

Maybe something like mmoustafa suggested:

$(window).resize(function() {
    $('#my-div').css('width', window.innerHeight*0.4+'px');
    $('#my-div').css('height', window.innerHeight*0.2+'px');
});
Jesse
  • 8,605
  • 7
  • 47
  • 57
Flo
  • 1