CODEWITHSUNDEEP
jqueryhtmlcss
Robbie
Robbie

Reputation: 75

How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

I can't seem to realise the following setup with html and css. I need 3 divs:

I have a spread of a book (an image) and I want it to be as big as possible. I'm planning on placing as a background image of the content div.

I made this mockup to make things clear:

enter image description here

Anyone got any idea's how I can realise this?

Upvotes: 3

Views: 2256

Answers (3)

Ireally Rock
Ireally Rock

Reputation: 236

You can set the height of the page using jquery

$(function()
  {
  $('.fullLength') .css({'height': (($(window).height()) -72)});
    $(window).bind('resize', function(){
    $('.fullLength') .css({'height': (($(window).height()) -72)});

  });        
});

For the width just set it at a percentage and then use css with margin: 0 auto

I have added a fiddle here http://jsfiddle.net/ktcle/G3G4x/

Upvotes: 1

Xavier
Xavier

Reputation: 4007

You can do this with HTML and CSS only like in the jsfiddle i made : http://jsfiddle.net/QBB4j/

HTML : 

<header>
    Header, fixed height
</header>

<div id=main>
    <div id=book>
        <img src="myimage.png" />
    </div>
</div>

<footer>
   Footer, fixed height
</footer>

Css :

header {
    height: 30px;
    background: red;
    margin-bottom: 30px;
}
#book img {
    width: 80%;
    height:80%;
    margin: auto;
}
footer {
    height: 30px;
    background: red;
    margin-top: 30px;
    position:absolute;
    bottom:0;
    width:100%;
}

Upvotes: 0

Srdjan Dejanovic
Srdjan Dejanovic

Reputation: 1409

You can try with supersized plugin.

And this is link how to keep footer at the bottom of the page.

Upvotes: 0

Related Questions