web-dev-qa-db-ja.com

背景画像に最大幅と高さを使用する方法はありますか？

とても簡単です。

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

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

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

これはbackground-sizeで実行できます。

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

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

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

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

17
thirtydot

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

例：

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

ただし、thirtydotでも述べられているように、これはIE6、7、8では機能しません。

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

30
Dan

背景画像を拡大縮小しようとしているようですか？これを達成するために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： 完全なページ全体の背景画像

13
Philll_t

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

例：

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

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

CSSユニットの詳細については、こちらをご覧ください： https://www.w3schools.com/cssref/css_units.asp

5
Hejar