This particular project was requested by @sanjaypoyzer. He wanted to elaborate on our trick to maintain aspect ratio for an element with CSS. His goal was to have a div, WITH content, that would maintain its square shape while still being responsive. Easy enough to do if you want the square to respond relative to the width of the browser window. But he wanted to take it a step further. If the viewing device is in LANDSCAPE mode, he wanted the element to resize relative to the HEIGHT of the browser, which is a much trickier thing to do.
So I found a solution that should work well on mobile devices. It does, however, break down a bit on a desktop version IF users are going to be resizing their browser while viewing it. It relies on a little hack utilizing a square image to resize the div. Positioning was also quite tricky to accomplish. Vertical centering is typically a tricky thing in CSS, but it can be done, even in this situation. So let’s take a look at our HTML we are going to try and work with.
|
1 2 3 4 5 6 7 8 9 |
<div class="wrap"> <main> <img class="clear" src="square.png" /> <div class="content"> <h2>Title</h2> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p> </div> </main> </div> |
We want to have our “main” element be centered and square, and have the following h2 and paragraph remain with in it. Again, as long as the browser isn’t actively being resized, this should work fairly well. Let’s take a look at where the real magic happens – the CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
html, body { background:#000; height:100%; } * { padding: 0; margin: 0; } main { display:block; background: #f9f9da; width: 60%; height: 0; padding-bottom: 60%; position:absolute; left:20%; top:20%; } @media only screen and (orientation: landscape) { .wrap { height: 100%; text-align: center; } main { display: inline-block; position:static; position: relative; height: 60%; width:inherit; left:0; top: 20%; padding-bottom:0; } img { height: 100%; width: auto; background:#fff; } .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:100%; } .clear { clear:both; } h2, p { float:left; max-width:100%; } } |
View the example page of this in action here.
There is actually quite a lot to it. But you see that if we go into landscape mode (the browser is wider than it is tall), we get a different set of CSS. Those are the rules used to make it resize relative to height. And it works pretty well when the browser first opens. The problem is that, at least in Chrome, which I’m using, the MAIN div does not resize WIDTH dynamically as you resize the browser window, even though it will if you refresh after you’ve resized it. But on mobile devices, where you can’t really resize the browser typically, this may work perfectly.
My suggestion to anyone wanting to use it, would be to set up a simple mobile redirect to this page, while leaving desktop users on a page that has our div only resize based on browser width, not height. I think it makes a little more sense to leave it that way on the computer, and then you don’t really have to worry about the failure to resize dynamically when you adjust your browser window.
That’s pretty much all there is to it! I hope someone else can come along and figure out a better way to do this, perhaps one that would work better on a desktop. Until then, we have this! Happy coding!
