web-dev-qa-db-fra.com

Mise à l'échelle de l'image d'arrière-plan tout en conservant le rapport hauteur / largeur

J'aimerais avoir des images pour mon arrière-plan qui changent automatiquement comme un diaporama. Mais je voudrais que les images remplissent l'arrière-plan, quelle que soit la taille de la fenêtre du navigateur ... et si elle est réduite, le rapport d'aspect de l'image ne change pas.

Voici un exemple de ce que j'essaie de faire:

http://www.thesixtyone.com/

Comment puis-je accomplir ces tâches? Toute aide sera très appréciée.

javascripthtmlcssbackground-image
23
Sev

Vous ne pouvez pas, du moins pas comme vous essayez maintenant.

Cependant, vous pouvez créer un <img> à la place, et avec css set position:absolute, redimensionnez-le à 100% de largeur et recadrez-le à partir du parent avec overflow:hidden

exemple: http://jsfiddle.net/GHmz7/4/

13
Mark Kahn

Avec CSS3, vous utiliseriez background-size propriété.

background-size: contain; Met l'image à l'échelle, tout en conservant son rapport d'aspect intrinsèque (le cas échéant), à la plus grande taille de sorte que sa largeur et sa hauteur puissent tenir dans la zone de positionnement de l'arrière-plan.

Contain ajuste toujours l'image entière dans votre fenêtre d'affichage, laissant des bordures opaques en haut en bas ou à gauche à droite lorsque le rapport entre l'image d'arrière-plan et la fenêtre du navigateur n'est pas le même.

background-size: cover; Met l'image à l'échelle, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la plus petite taille de sorte que sa largeur et sa hauteur puissent couvrir complètement la zone de positionnement de l'arrière-plan.

Cover remplit toujours la fenêtre du navigateur, coupant des cheveux ou des oreilles dans le processus, ce que je préfère personnellement dans la plupart des cas. Vous pouvez contrôler l'alignement de votre image dans la fenêtre en utilisant la propriété background-position.

85
drudge

Vous pouvez essayer jquery/js pour changer l'image d'arrière-plan:

<!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>

Vous pouvez à la place créer des classes CSS pour les arrière-plans et utiliser .toggleClass ()

2
msmafra

Vous ne pouvez pas redimensionner de manière fiable les images d'arrière-plan dans tous les navigateurs/versions, etc.

L'effet que vous voyez sur le site thesixtyone.com est obtenu en étirant une image en ligne normale à 100% de son conteneur qui est une division d'espace réservé. D'autres éléments flottent ensuite au-dessus de cette division "d'arrière-plan".

La réponse n'est donc pas d'utiliser une image d'arrière-plan, mais de faire en sorte qu'une image remplisse l'écran dans un espace réservé, puis placez d'autres éléments dessus.

0
Billy Moon