CODEWITHSUNDEEP
htmlcssresponsive-designaspect-ratio
Lewis Malpas
Lewis Malpas

Reputation: 111

Responsive DIV with Intrinsic ratios which scales horizontally and vertically

I am currently in the process of developing a website which features a lot of images with specific ratios. I am trying to get a div to resize both horizontally and vertically whilst keeping its aspect ratio, a similar effect can be seen on the following two websites:

http://www.bureaucollective.ch/

http://www.yesstudio.co.uk/

As you can see the images resize both horizontally and vertically whilst keeping their aspect ratios. The images are also vertically centered within the window which is something I would to include within the website I am developing.

At the moment my code is as follows:

body, html {
    height: 100%;
    background: #f0f0f0;
}

#content {
    background: #FFF;
    margin: 0 auto;
    min-height: 100%;
    width: 80%;
}

div.stretchy-wrapper {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    background: #000;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

<body>
    <div id="content">
        <div class="stretchy-wrapper">
            <div></div>
        </div>
    </div>
</body>

Upvotes: 1

Views: 3381

Answers (2)

geovani075
geovani075

Reputation: 377

here is an update which is very similar to http://www.yesstudio.co.uk/.

HTML

<div id="content">
    <div class="stretchy-wrapper">
        <div></div>
    </div>
</div>

CSS

<style>
body, html {
    height: 100%;
    background: #f0f0f0;
    overflow:hidden
}

#content {
    background: #FFF;
    margin: 0 auto;
}

div.stretchy-wrapper {
    margin: 0 auto;
    position: relative;
    background: #000;
    width:100%;
    height:100%
}

div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

</style>

js

    <script>
function resize(){
        var winwidth, winheight, conwidth, conheight, imgheight, imgwidth, top, left;
        winwidth = $(window).width();
        winheight = $(window).height();
        conwidth = winwidth - 260;
        if(conwidth < 493){ conwidth = 493; }
        conheight = winheight - 95;
        conratio = conwidth/conheight;
        imgwidth = 1200;
        imgheight = 800;
        imgratio = 1200/800;
        if(conratio < imgratio){
            width = conwidth;
            height = conwidth / imgratio;
        } else {
            height = conheight;
            width = conheight * imgratio;
        }
        if(width > imgwidth || height > imgheight){
            width = imgwidth;
            height = imgheight;
        }

        top = (winheight/2) - (height/2);
        left = (winwidth/2) - (width/2);

        arrowheight = Math.round((winheight - height) / 2);


        if(left < 130){left = 130; }
        $("#content").css("top",top+"px").css("left",left+"px");
        $("#content").css("height",height+"px").css("width",width+"px");
    }

$(window).resize(resize);

$(document).ready(function(e) {
resize();
});

</script>

And Finally here is a working Demo :) Enjoy

Upvotes: 2

lloan
lloan

Reputation: 1403

I would say use Max-Width: 100% but I've been reading this...

http://unstoppablerobotninja.com/entry/fluid-images/

It's about responsive images - it recalculates the proportional values for you.

Upvotes: 0

Related Questions