CODEWITHSUNDEEP
htmlcssresponsive-design
Toniq
Toniq

Reputation: 5006

Responsive div size with proportions

I have this setup:

<div class="wrapper">
    <div class="container"> <div class="inner"></div></div>
</div>

.wrapper {
    max-width:320px;
    max-height:240px;
}
.container {
    position:relative;
    padding-top:56.25%;
    background:green;
}
.inner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

http://jsfiddle.net/3A32T/2/

If you shrink window width, div size shrinks while keeping aspect ratio which is what I want.

However, if you shrink window height, div height doesnt shrink, you get browser scroll.

Is there a way to achieve second conditional as well?

Upvotes: 0

Views: 72

Answers (1)

codingrose
codingrose

Reputation: 15699

Updated DEMO here.

Change padding-top to height

Write:

html,body,.wrapper{
    height:100%;
    width:100%;
}
.container {
    height:56.25%;
}

Upvotes: 1

Related Questions