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. 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. 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. But on mobile devices, where you can’t really resize the browser typically, this may work perfectly. 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. And it works pretty well when the browser first opens. Those are the rules used to make it resize relative to height. 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. View the example page of this in action here. So let’s take a look at our HTML we are going to try and work with. Vertical centering is typically a tricky thing in CSS, but it can be done, even in this situation. Positioning was also quite tricky to accomplish. It relies on a little hack utilizing a square image to resize the div. It does, however, break down a bit on a desktop version IF users are going to be resizing their browser while viewing it. So I found a solution that should work well on mobile devices. 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. Easy enough to do if you want the square to respond relative to the width of the browser window. His goal was to have a div, WITH content, that would maintain its square shape while still being responsive. This particular project was requested by He wanted to elaborate on our trick to maintain aspect ratio for an element with CSS.
0 kommentar(er)
