41

クリップされた上部/下部にオーバーフローがある場合でも、それぞれが独自の固定高さを持ち、幅を埋めるためにストレッチする背景画像を使用して一連の div をセットアップしようとしています。端に空白が欲しくないだけです。

現在、私は持っています：http://jsfiddle.net/ndKWN/

CSS

    #main-container {
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align: center;
    }

    .chapter{
        position: relative;
        height: 1400px;
        z-index: 1;
    }

    #chapter1{
    background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

    #chapter2{
    background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }
4

3 に答える 3

58

ここで同様の質問に対する私の回答を参照してください。

背景画像を独自の縦横比を維持しながら、幅 100% に拡大し、上部と下部をトリミングしたいようです。その場合は、次のようにします。

.chapter {
    position: relative;
    height: 1200px;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/3/

このアプローチの問題点は、コンテナー要素の高さが固定されているため、画面が十分に小さい場合は下にスペースができることです。

画像の縦横比を維持する高さが必要な場合は、上でリンクした回答の編集で書いたようなことをする必要があります。コンテナのheightを 0 に設定し、padding-bottomを幅のパーセンテージに設定します。

.chapter {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/4/

各画像の縦横比が異なる場合は、padding-bottomパーセンテージを各スタイルに入れることもできます。#chapter異なる縦横比を使用するには、元の画像の高さを独自の幅で割り、100 を掛けてパーセント値を取得します。

于 2013-05-02T14:12:28.333 に答える
19

http://jsfiddle.net/ndKWN/1/

使用できますbackground-size: cover;

于 2013-03-30T00:57:04.857 に答える
4

しかし、.chapter クラスは動的ではなく、height:1200px を宣言しています。

background:cover を使用して、一般的な解像度の特定の高さのメディア クエリを設定することをお勧めします。

于 2015-05-04T14:13:52.667 に答える