7

こんにちは、1200 x 1200 の大きな背景画像があります。ユーザーがブラウザのサイズを変更したときに画像を拡大したいのですが、元のサイズよりも小さくならないように制限します。

そこにはスケーラブルな背景画像がたくさんありますが、これを行うことができるものはありません。助けていただければ幸いです。

4

6 に答える 6

23 
background-size: cover;

どうぞ

于 2013-12-29T00:21:01.293 に答える
5

次の CSS + Javascript + JQuery の組み合わせがうまくいきました。

上記の回答が役に立ったANevesに感謝します。

CSS:

body
{
    background: url(background.jpg) center center fixed;
    background-size: 100% auto;
}

Javascript (JQuery):

jQuery (function ($)
{   // ready
    $(window).resize (function (event)
    {
        var minwidth = 1200;
        var minheight = 1024;

        var bodye = $('body');

        var bodywidth = bodye.width ();

        if (bodywidth < minwidth)
        {   // maintain minimum size
            bodye
                .css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
            ;
        }
        else
        {   // expand
            bodye
                .css ('backgroundSize', '100% auto')
            ;
        }
    });
});
于 2011-05-30T14:03:30.707 に答える
5

もう 1 つの可能性は、メディア クエリを使用することです。画像サイズを 1280x450 に設定し、background-size:100% auto のメディア クエリを使用します。幅 1280px を超えるすべてのウィンドウ サイズ。

IEで画像のサイズ変更も処理するコードがいくつかありますが、確かにそれでの成功は限られていました...

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;

誰かが上記のアドオンや修正を持っている場合は、遠慮なく貢献してください。

これが誰かを助けることを願っています...

于 2012-08-21T20:48:26.363 に答える
1

背景画像の場合、通常、htmlタグの最小幅を設定します。これは、画像の元の幅以下になります。これにより、画像が過度に縮小するのを防ぎます。

于 2013-03-18T13:56:07.857 に答える
0

CSS3 のbackground-sizeプロパティを探しているようです。画像が 1200x1200 であることがわかっている場合は、コンテナの最小サイズを制限できます。

ただし、IEでは機能するとは思わないので、選択肢にならないかもしれません。その場合は、 http://www.markschek.com/cssexp/background/scaledbgimage.html
をのぞいてみてください。

于 2010-06-15T11:12:35.220 に答える