css - CSS3 は「背景」の「最小サイズ」プロパティを提供しますか?

Question

私は使用しています

background-size: 100%;

背景画像 (body-tag 内) をブラウザー ウィンドウに合わせます。

しかし、最小サイズを設定するための CSS3 background-property はありますか?

または、次のようなdiv-「トリック」が必要ですか？

<div id="bg">
    <img src="images/bg.jpg" alt="">
</div>

#bg {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
}
#bg img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
}

Answer 1

私はあなたが探していると思います

background-size: contain;

また

background-size: cover;

違いはcover、縦横比を維持しながら背景画像をできるだけ小さくする必要があることです。contain一方、背景画像をできるだけ大きくする必要があることを指定します。

ここで MDN のドキュメントを参照してください。

Answer 2

これを追加するのはどうですか：

@media screen and (max-width:700px){
    #bg img { width: 500px; /* fixed width under 700px */ }
}