CODEWITHSUNDEEP
javascripthtmlcsslayout
Dan Hlavenka
Dan Hlavenka

Reputation: 3817

Scale div to fill screen while maintaining aspect ratio

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.

Upvotes: 5

Views: 3967

Answers (4)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

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.

Upvotes: 4

Avin Varghese
Avin Varghese

Reputation: 4370

   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/

Upvotes: 0

DextrousDave
DextrousDave

Reputation: 6793

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...

Upvotes: 0

Praveen
Praveen

Reputation: 56501

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;
}

Upvotes: -1

Related Questions