4

背景画像のサイズに合わせて div のサイズ (幅と高さの両方) を設定しようとしていますが、うまくいきません。レスポンシブ Web サイトを扱っているため、背景画像のサイズはパーセンテージで指定する必要があります。小さい画面では、背景が完全に表示され (幅は狭くなりますが、比例します)、画像を含む div はそのサイズに従う必要があります。

auto 100%、cover、contain など、背景サイズのさまざまな値を試しましたが、何もうまくいきませんでした。これについても同様の質問があります: div を背景画像のサイズにスケーリングしますが、私の問題も解決しませんでした。

誰かがそれを行う方法を知っているなら、私は本当に感謝しています。

編集: 動作を示すためにフィドルを作成しました: http://jsfiddle.net/osv1v9re/5/ この行は、背景画像を非常に小さくしているものです:

background-size: auto 100%;

しかし、それが削除された場合、背景は適切な幅を埋めますが、高さは埋めません。

4

3 に答える 3

9

タグは背景画像のサイズに適応できません。タグを使用して、div または javascript の高さ: 自動のいずれかを選択する必要があります。

// **** Problem ****

// Wrong html :
<div class="my_class"><div>

// with css :
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

//****  Solution ****

// use css:
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: contain;
}
于 2015-05-27T13:33:09.307 に答える
3 

*{
    padding: 0;
    margin: 0;
}


div{
    width: 100%;
}
div figure{
    padding-top: 36.56%;  /* 702px/1920px = 0.3656 */
    display: block;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;  
}
<div>    
    <figure></figure>
</div>

于 2015-05-19T07:57:02.130 に答える