1

現在、特定の比率の画像を多数掲載する Web サイトを開発中です。縦横比を維持しながら水平方向と垂直方向の両方で div のサイズを変更しようとしています。次の 2 つの Web サイトでも同様の効果が見られます。

http://www.bureaucollective.ch/

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

ご覧のとおり、画像は縦横比を維持したまま、水平方向と垂直方向の両方でサイズ変更されます。画像もウィンドウ内で垂直方向に中央に配置されます。これは、開発中の Web サイトに含めるものです。

現時点で私のコードは次のとおりです。

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 に答える