1

我目前正在开发一个网站，其中包含大量具有特定比例的图像。我试图让一个 div 在保持其纵横比的同时水平和垂直调整大小，在以下两个网站上可以看到类似的效果：

http://www.bureaucollective.ch/

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

如您所见，图像在水平和垂直方向调整大小，同时保持其纵横比。这些图像也在窗口中垂直居中，这是我正在开发的网站中包含的内容。

目前我的代码如下：

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

2 回答 2

2

这是一个与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>

最后这是一个有效的演示:) 享受

于 2013-05-31T11:42:11.927 回答
0

我会说使用 Max-Width: 100% 但我一直在读这个......

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

它是关于响应式图像的——它会为您重新计算比例值。

于 2013-05-31T11:41:07.927 回答