image - 背景画像にmax-widthとheightを使用する方法はありますか？

Question

とても簡単です。

レイアウトを流動的な領域に移動し、スケーラブルな画像に取り組んでいます。imgタグを使用し、max-widthを100％に設定すると完全に機能しますが、画像を背景として設定したdivを使用したいと思います。

私が遭遇している問題は、画像が背景にあるdivのサイズに拡大縮小されないことです。バックグラウンドコードにマークアップを追加して、コンテナの幅を100％に設定する方法はありますか？

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Answer 1

30ドットが言ったように、CSS3background-size構文を使用できます。

例えば：

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

ただし、30ドットでも述べられているように、これはIE6、7、および8では機能しません。

詳細については、次のリンクを参照してくださいbackground-size： http ://www.w3.org/TR/css3-background/#the-background-size

Answer 2

あなたはこれを行うことができますbackground-size：

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

cover設定できる値以外にも多くの値があります。どの値が適切background-sizeかを確認してください：https ：//developer.mozilla.org/en-US/docs/Web/CSS/background-size

仕様：https ：//www.w3.org/TR/css-backgrounds-3/#the-background-size

最新のすべてのブラウザで動作します：http：//caniuse.com/#feat=background-img-opts

Answer 3

背景画像を拡大縮小しようとしているようですか？以下のリファレンスには、css3を使用してこれを実現できる優れた記事があります。

そして、私が質問を読み間違えた場合、私は謙虚に投票を受け入れます。（それでも知っておくと良いです）

次のコードを検討してください。

#some_div_or_body { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

これはすべての主要なブラウザで機能しますが、もちろんIEでは簡単ではありません。ただし、Microsoftのフィルターを使用するなど、いくつかの回避策があります。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

jQueryを使用することで、少し安心して使用できるいくつかの選択肢があります。

HTML

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

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery：

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

これがお役に立てば幸いです。

Src：完璧なフルページの背景画像

Answer 4

残念ながら 、CSSには使用できる min（または）-background-sizeはありません。ただし、レスポンシブな背景画像を探している場合は、プロパティの単位を使用して同様のことを実現できます。maxbackground-sizeVminVmaxbackground-size

例：

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

これにより、高さが垂直または水平の小さいビューポートの10％に設定され、幅が100％に設定されます。

ここでcssユニットの詳細を読む：https ：//www.w3schools.com/cssref/css_units.asp

Answer 5

これはあなたが探している解決策です！

background-size: 100% auto;