2

background-size:containとbackground-size:coverを同時に使いたい。画像の縮尺を維持しながら、背景画像を常にブラウザ ウィンドウの幅 100% x 高さ 100% に引き延ばしたいと考えています。

これが私がやろうとしていることの完璧な例です

これを達成するための純粋なcssルートはありますか?

これが私のコードです：

<div class="page-section clear">
     <div class="landing_photo clear" style="background-image:url('<?php echo get_template_directory_uri(); ?>/img/tempory_landing.png');">

    </div>
</div>

.page-section {
    width:100%;
    height:100%;
    margin:auto;
}
.landing_photo {
    width:100%;
    height:100%;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
}
4

1 に答える 1

2

インライン スタイルはあまりよくないので、まずurlCSS ファイルに画像を挿入します。

次に、固定値を高さと幅に割り当てる必要があります.landing_photo。

これは、目的を達成するための結果の CSS です。

.page-section {
    width:100%;
    height:100%;
    margin:auto;
}
.landing_photo {
    width:500px;
    height:500px;
    background-position:100% 100%;
    background-repeat:no-repeat;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
}

そしてマークアップ

<div class="page-section clear">
    <div class="landing_photo clear"></div>
</div>

デモを作成しました。

于 2015-01-14T09:37:54.580 に答える