web-dev-qa-db-fra.com

L'image d'arrière-plan CSS s'adapte à 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 la largeur de cette image d'arrière-plan soit égale à celle de la page, la hauteur changeant pour conserver les proportions. par exemple. si l'image originale fait 100 * 200 (toutes unités) et que le corps mesure 600 pixels de large, l'image d'arrière-plan doit atteindre 1 200 pixels de haut. La hauteur devrait 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 plus longue dimension et que l'on essaie d'éviter de recadrer? Je veux pour rogner verticalement, puis faites défiler: pas de répétition horizontale.

De plus, Chrome place l'image au centre, sans répétition, même lorsque background-repeat:repeat est donné explicitement, ce qui est le cas par défaut.

htmlcss
321
spraff

Il existe une propriété CSS3 pour cela, à savoir background-size ( vérification de la compatibilité ). Bien que vous puissiez définir des valeurs de longueur, il est généralement utilisé avec les valeurs spéciales contain et cover. Dans votre cas spécifique, vous devriez 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 contain et cover

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

screen

Nous voulons utiliser la photo du jour susmentionnée comme arrière-plan. Cependant, nous avons recadré l'image en 4x3 pour une raison quelconque. Nous pourrions définir la propriété background-size sur une longueur fixe, mais nous nous concentrerons sur contain et 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 taille la plus grande possible, de sorte que sa largeur et sa hauteur puissent s'inscrire dans la zone de positionnement de l'arrière-plan.

Cela permet de s’assurer que l’image d’arrière-plan est toujours entièrement contenue dans la zone de positionnement de l’arrière-plan. Toutefois, il pourrait y avoir un espace vide rempli de votre background-color dans ce cas:

contain

cover

cover

Mettez 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.

Cela garantit que l'image d'arrière-plan couvre tout. Il n'y aura pas de background-color visible. Toutefois, en fonction du format de l'écran, une grande partie de votre image pourrait être tronquée:

cover

Démonstration avec le code actuel

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>
756
Zeta

Basé sur des astuces 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;
}
34
Yauhen Yakimovich

Je ne sais pas exactement ce que vous recherchez, mais vous devriez absolument consulter ces excellents billets 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 si c'est ce que vous cherchez.

Le premier répond à la question suivante:

Est-il possible de redimensionner une image d'arrière-plan? Au fur et à mesure, 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. En outre, faites-le redimensionner plus ou moins grand à mesure que la fenêtre du navigateur change. Aussi, assurez-vous qu'il conserve son ratio (ne s'étire pas bizarre). En outre, ne provoque pas de barres de défilement, coupe simplement verticalement si nécessaire. En outre, apparaît sur la page en tant que balise en ligne.

Le second article vise à obtenir ce qui suit, une "image d’arrière-plan sur un site Web qui couvre toute la fenêtre du navigateur à tout moment".

J'espère que cela t'aides.

11
element119

Essaye ça,

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

Ajoutez simplement cette ligne:

    .your-class {
        height: 100vh;
    }

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

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

6
Ruto Collins

L'image de fond n'est pas parfaite alors son css est un problème, 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 du fond: 100% 100%; "

6
jignesh vasoya
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
2
Adriaan Mouton

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: contenir;

2
CodingWoodsman

Voici ce qui a fonctionné pour moi:

background-size: auto 100%;
1
Danny McMurray