Image d'arrière-plan CSS pour s'adapter à la largeur, la hauteur doit être mise à l'échelle automatiquement en proportion

j'ai

body {
    background: url(images/background.svg);
}

L'effet souhaité est que cette image d'arrière-plan aura une largeur égale à celle de la page, la hauteur changeant pour maintenir la proportion. Par exemple, si l'image d'origine se trouve être 100 * 200 (toutes les unités) et que le corps a une largeur de 600 pixels, l'image d'arrière-plan devrait finir à 1200 pixels de haut. La hauteur doit changer automatiquement si la fenêtre est redimensionnée. Est-ce possible?

Pour le moment, Firefox semble ajuster la hauteur, puis ajuster la largeur. Est-ce peut-être parce que la hauteur est la dimension la plus longue et qu'elle essaie d'éviter le recadrage? Je veux recadrer verticalement, puis faire défiler: pas de répétition horizontale.

En outre, Chrome place l'image au centre, sans répétition, même lorsqu'elle background-repeat:repeatest donnée explicitement, ce qui est de toute façon la valeur par défaut.

Il existe une propriété CSS3 pour cela, à savoir background-size( vérification de compatibilité ). Bien que l'on puisse définir des valeurs de longueur, il est généralement utilisé avec les valeurs spéciales containet cover. Dans votre cas spécifique, vous devez utiliser cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation pour containetcover

Désolé pour le mauvais jeu de mots, mais je vais utiliser l' image du jour par Biswarup Ganguly pour la démonstration. Disons que c'est votre écran et que la zone grise est en dehors de votre écran visible. Pour démonstration, je vais supposer un ratio 16x9.

Nous voulons utiliser l'image de la journée susmentionnée comme arrière-plan. Cependant, nous avons recadré l'image en 4x3 pour une raison quelconque. Nous pourrions définir la background-sizepropriété sur une longueur fixe, mais nous nous concentrerons sur containet cover. Notez que je suppose également que nous n'avons pas modifié la largeur et / ou la hauteur de body.

contain

contain

Redimensionnez l'image, tout en préservant son rapport d'aspect intrinsèque (le cas échéant), à la plus grande taille de sorte que sa largeur et sa hauteur puissent s'adapter à l'intérieur de la zone de positionnement d'arrière-plan.

Cela garantit que l'image d'arrière-plan est toujours complètement contenue dans la zone de positionnement d'arrière-plan, cependant, il pourrait y avoir un espace vide rempli avec votre background-colordans ce cas:

cover

cover

Redimensionnez l'image, 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 d'arrière-plan.

Cela garantit que l'image d'arrière-plan couvre tout. Il n'y aura pas de visibilité background-color, mais selon le rapport de l'écran, une grande partie de votre image pourrait être coupée:

Démonstration avec le code réel

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Sur la base des conseils de https://developer.mozilla.org/en-US/docs/CSS/background-size, je me retrouve avec la recette suivante qui a fonctionné pour moi

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Je ne sais pas exactement ce que vous cherchez, mais vous devriez vraiment consulter ces excellents articles de blog écrits par Chris Coyier de CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Lisez les descriptions de chacun des articles et voyez s'ils correspondent à ce que vous recherchez.

Le premier répond à la question suivante:

Existe-t-il un moyen de redimensionner une image d'arrière-plan? Comme dans, remplissez l'arrière-plan d'une page Web bord à bord avec une image, quelle que soit la taille de la fenêtre du navigateur. Aussi, faites-le redimensionner plus ou moins à mesure que la fenêtre du navigateur change. Assurez-vous également qu'il conserve son rapport (ne s'étire pas bizarrement). En outre, ne provoque pas de barres de défilement, coupe juste verticalement si nécessaire. En outre, apparaît sur la page sous forme de balise en ligne.

L'objectif du deuxième article est d'obtenir ce qui suit, une «image d'arrière-plan sur un site Web qui couvre à tout moment la fenêtre entière du navigateur».

J'espère que cela t'aides.

L'image d'arrière-plan n'est pas définie parfaite, puis son fichier CSS est un problème à créer, donc son fichier CSS passe au code ci-dessous

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; taille de l'arrière-plan: 100% 100%; "

Essaye ça,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Ajoutez simplement cette ligne:

    .your-class {
        height: 100vh;
    }

vh est la hauteur de la fenêtre. Cela s'adaptera automatiquement à la fenêtre du navigateur de l'appareil.

Vérifiez plus ici: Faites div 100% de la hauteur de la fenêtre du navigateur

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

J'ai eu le même problème, impossible de redimensionner l'image lors du réglage des dimensions du navigateur.

Mauvais code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Bon code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

La clé ici est l'ajout de cet élément -> background-size: contain;

Voici ce qui a fonctionné pour moi:

background-size: auto 100%;

La définition de la taille de l'arrière-plan n'aide pas, la solution suivante a fonctionné pour moi:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Il recadre l'image et la fait s'intégrer, background-size: contain/covermais ne l'a toujours pas adaptée.