Scale div to fill screen while maintaining aspect ratio

Question

Here's a JSFiddle of the page I'm talking about: http://jsfiddle.net/nmUuU/

I need the outer div (with class="page") to expand or shrink to fill the user's screen. I want the aspect ratio of the div (and obviously, its children) to stay the same. I've tried plaing with jQuery plugins like TextFill, but had no success.

I've done this a thousand times with an image, but this time I have a div with a bunch of elements inside. Can it still be done?

EDIT: It seems like I may not have emphasized this, but I want the children of the div to increase in size as well. It should look as if the div is an image that has just been scaled up; the elements inside should maintain their relationship to one another, while expanding to fill the parent. It should go from looking like this to looking like this (border added to indicate screen edges).

While pure CSS would always be nice, I'm guessing it's going to involve some Javascript. Even just a couple pointers would be much appreciated.

why not you use media queries? – The Mechanic May 21 '13 at 07:09 — The Mechanic, May 21 '13 at 07:09

Mathijs Flietstra · Accepted Answer · 2013-05-22T09:04:52.657

4

I don't think this can be done with CSS only currently, as you would need to be able to read the width of certain elements, this cannot be done at the moment. But since JS is OK with you now, you could do something like this using jQuery:

function zoomit() {
  $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);

Here's a jsFiddle

Here's a jsFiddle of the latest version which doesn't use zoom but -transform vendor tags only.

Edit:

I just realised that zoom doesn't actually work on Firefox. Instead you could use -moz-transform: scale(x, y); for Firefox and set x and y to the appropriate values, which you can work out in the same way as I have already done in the example above.

Edit2

Here's a link to w3schools with some info about CSS 2D transforms and the prefixes for other browsers, as you mentioned in the comments, writing something that checks if for width > height and the other way around, and then basing the transform on that, should do the trick for all browsers. Post the jsFiddle if you get it working and I'll add it to the answer, I'm happy to have a go at it if you don't get it working.

edited May 22 '13 at 09:04

answered May 21 '13 at 06:16

Mathijs Flietstra

12,900
3
38
67

Your code sometimes chokes depending on window size (when width > height, I needed to change both `width()`s to `height()`). It's a good start, but do you know of a non-CSS3 way of doing this? Even Firefox doesn't support it. – Dan Hlavenka May 21 '13 at 06:27
http://jsfiddle.net/nmUuU/21/show/ is about 90% working. It looks fine on all *normal* resolutions I've tried, but when the window is about squareish and ~1000px wide, it gets strange in a way I wasn't able to programmaticly detect. – Dan Hlavenka May 21 '13 at 08:45
1

I updated my solution to completely use `transform` with vendor tags, and eliminated `zoom` entirely. Using transform had the interesting effect of repositioning the element, which needed to be compensated for with margins. I think my calculations are still a little off at times, but my latest incarnation is http://jsfiddle.net/nmUuU/34/ – Dan Hlavenka May 22 '13 at 09:00
I have added it into the answer, the thing with the margins, it might be easier to fix that with the [`-transform-origin`](http://www.w3schools.com/cssref/css3_pr_transform-origin.asp) property, if you set that to `0px 0px` for example. – Mathijs Flietstra May 22 '13 at 09:06

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Wrap your content in another div, which will be inside the main div (class:page) and make all your other elements position: relative

<div class="page">
  <div class="wrapper">
  </div>
</div>

CSS:

.page{
    position:relative;
    padding-bottom:100%;  /*where the magic happens*/
    height:0;             /*where the magic happens*/
    overflow:hidden;
    max-width: 960px;
    width: 100%;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}
.wrapper{
    position:absolute;
    width:100%;
    height:100%;
    
}

See the FIDDLE

Just resize the Window and play around with it...you get the idea...

NOTE: Currently overflown content is hidde, you can make it scroll if you want to...

Your example just seems to make the outer div about 2x taller than the screen: http://i.imgur.com/QADYc4u.jpg (note the scroll bar) — Dan Hlavenka, May 21 '13 at 06:16

score 0 · Answer 3 · answered May 21 '13 at 05:54

0

   html, body{
        margin: 0;
        height: 100%;
        background-color: #eee;
    }.page{
        margin: auto;
        width: 960px;
        height: 745px;
        color: black;
        text-align: center;
        font-family: Raleway, Helvetica, Arial, sans-serif;
    }

Fiddle : http://jsfiddle.net/nmUuU/14/show/

answered May 21 '13 at 05:54

Avin Varghese

4,340
1
22
31

This doesn't change the size of any inner elements. See updated question for clarification. – Dan Hlavenka May 21 '13 at 06:17

score -1 · Answer 4 · answered May 21 '13 at 04:42

-1

Try specifying the width and height in percent instead of pixels.

.page{
    margin: auto;
    width: 100%;
    height: 100%;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}

answered May 21 '13 at 04:42

Praveen

55,303
33
133
164

How will this preserve the aspect ratio, or scale any of the inner elements? – Dan Hlavenka May 21 '13 at 05:10

Scale div to fill screen while maintaining aspect ratio

4 Answers4

Linked