web-dev-qa-db-ja.com

アスペクト比を維持しながら背景画像のスケーリング

スライドショーのように自動的に変化する背景用の画像が欲しいです。ただし、ブラウザウィンドウのサイズに関係なく、画像が背景全体に表示されるようにします。縮小しても画像の縦横比は変わりません。

ここに私がやろうとしていることの例があります：

http://www.thesixtyone.com/

これらのタスクをどのように達成できますか？どんな助けも大歓迎です。

javascripthtmlcssbackground-image
23
Sev

少なくともあなたが今やろうとしているようにはできません。

ただし、代わりに<img>を作成し、cssをposition:absoluteに設定して、幅を100％にスケーリングし、overflow:hiddenを使用して親から切り取ることができます。

例： http://jsfiddle.net/GHmz7/4/

13
Mark Kahn

CSS3では、background-sizeプロパティを使用します。

background-size: contain;固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景の配置領域内に収まるように画像を最大サイズにスケーリングします。

Containは常にビューポート内の画像全体にフィットし、背景画像とブラウザウィンドウの比率が同じでない場合は、上下または左右に不透明な境界線を残します。

background-size: cover;固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズにスケーリングします。

Coverは常にブラウザウィンドウを塗りつぶし、その過程で髪や耳を切り取ります。これは私が個人的にほとんどの場合に好むものです。 background-positionプロパティを使用して、ビューポート内での画像の配置方法を制御できます。

85
drudge

Jquery/jsを試して背景画像を変更できます。

<!doctype html>
<html>
    <head>
        <title>Width resolution</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 20px;
                font-family: arial,helvetica,sans-serif;
                font-weight: 700;
                color:#eee;
                text-shadow: 0px 0px 1px #999;
}
            div {
                width:auto;
                height:340px;
                border:#ccc groove 2px;
                padding:5px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('body').css({'background-color':'#ccc'});

                var sw = screen.width;

            function wres() {
                switch(sw) {
                    case 1920:
                        $('div').css({'background':'#192000 url(bg-1920.jpg)'});
                        $('body').css({'background':'#001920 url(bg-1920.jpg)'});
                        break;
                    case 1600:
                        $('div').css({'background':'#160000 url(bg-1600.jpg)'});
                        $('body').css({'background':'#001600 url(bg-1600.jpg)'});
                        break;
                    case 1280:
                        $('div').css({'background':'#128000 url(bg-1280.jpg)'});
                        $('body').css({'background':'#001280 url(bg-1280.jpg)'});
                        break;
                    case 1152:
                        $('div').css({'background':'#115200 url(bg-1152.jpg)'});
                        $('body').css({'background':'#001152 url(bg-1152.jpg)'});
                        break;
                    default:
                        $('div').css({'background':'#102400 url(bg-1024.jpg)'});
                        $('body').css({'background':'#001024 url(bg-1024.jpg)'});
                }
                    //alert(rsw);
                    //$('div').html(rsw);
                    $('.res').append(' '+sw);
                    $('div.res').css('width', 1920);
                }
                //alert(sw);
                wres();
            });
        </script>
    </head>
    <body>
        <h1 class="res">Resolução atual:</h1>
        <div class="res">The div</div>
    </body>
</html>

代わりに、背景用のCSSクラスを作成し、.toggleClass（）を使用できます

2
msmafra

すべてのブラウザ/バージョンなどで背景画像のサイズを確実に変更することはできません...

Thesixtyone.comサイトに表示される効果は、通常のインラインイメージをプレースホルダー部門であるコンテナーの100％に引き伸ばすことによって実現されます。他の要素は、この「背景」区分の上部に浮かんでいます。

そのため、答えは背景画像を使用するのではなく、画像をプレースホルダーの画面全体に表示し、その上に他の要素を配置することです。

0
Billy Moon