28112 sujets

CSS et mise en forme, CSS3

Background-size: cover (juste en largeur)

Bonjour,
après lecture de ce
tuto
J'ai cherché si c'était possible de faire la même chose mais en imposant juste que l'image fasse la largeur de la fenêtre. la hauteur étant défini par la conservation du ratio de l'image.
Je n'ai pas trouvé de solution alors je viens ici pour savoir si c'est possible.
Merci
Modifié par maika (10 Apr 2018 - 14:27)
Modérateur
Bonjour,

Avez-vous essayé background-size: contain ?

A en croire W3Schools cette valeur redimensionne l'image de sorte qu'elle soit toujours entièrement visible.
Edit: "posté avant de voir la première réponse" Donc oui j'ai fait un essai mais pas complétement concluant.
Merci.


div { 
  margin:0;
  padding:0;
  background: url(bgd.jpg) no-repeat; 
  background-size: contain;
  top:0px;
  width:100%;
  height:300px;
}

comme ça avec une image de hauteur inférieur à 300px en plein écran ça marche presque. mais je voudrais que le div fasse la hauteur de l'image ( qu'il soit à hauteur variable donc)
Modifié par maika (10 Apr 2018 - 14:41)
Modérateur
maika a écrit :
je voudrais que le div fasse la hauteur de l'image ( qu'il soit à hauteur variable donc)
Alors pourquoi lui spécifier une hauteur (à la div car div comme "division") ?
Merci, je ne savais pas c'était "la"
pourquoi car si je ne spécifie rien : elle fait 1 ligne de haut (car dans ma div il y a <...>) l'image est donc affichée entière mais toute petite.
Modifié par maika (10 Apr 2018 - 14:50)
Modérateur
Salut,

Le background ne pourra pas imposer sa hauteur (ni sa largeur) au parent.

Soit tu fixe la hauteur (et/ou largeur) du bloc et le background s'y adapte.

Soit tu met une balise image dans le bloc et tu dit à l'image de prendre width:100%; ce qui aura pour effet d'avoir l'image sur toute la largeur et le bloc parent prendra la hauteur de l'image. Mais ça restera un contenu et non un background (donc écrire des truc par dessus sera plus compliqué).

Dans le tuto que tu donne au début, aucune des blocs n'a de hauteur variable en fonction de l'image, c'est l'image en background qui s'adapte aux blocs.
Sujet clos
Aller à