Comment faire une pleine largeur de l'image réactive
J'ai une image qui est mon en-tête. Voici mon HTML simple:
<html>
<body>
<div class="wrapper" />
</body>
</html>
Il remplit toute la largeur de la page, mais j'ai eu de spécifier une hauteur pour apparaître. Voici le css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
Comment puis-je faire de cette image sensible? Maintenant, quand je développez la page il en arrive au point où le pic est méconnaissable.
Vous devez vous connecter pour publier un commentaire.
N'ai pas reçu votre question tranquille, mais je pense que vous êtes absent une valeur ici
CSS
Démo
Que ralph.m a suggéré, si vous utilisez cette image en tant que fond de site web, que l'utilisation de la
background
bien surbody
élément au lieu dediv
Vous devez utiliser à la suite de CSS pour rendre le fond sensible
RéférenceLien
+1
ouibackground-size
avec la seule valeur définit le largeur, le hauteur sera automatiquement mis àauto
(donc pourquoi il n'a pas été en montrant d'abord). Je serais certainement aller avec lecover
option.Vous avez besoin de réfléchir attentivement à la manière dont vous le souhaitez/ce que cela fonctionne. Sans réel contenu dans le div, il aura zéro de la hauteur, qui est pourquoi vous avez besoin de définir une hauteur sur elle; mais en général, essayez d'éviter de fixer des hauteurs. Sans doute, si c'est un "wrapper", il sera habillage du contenu qui va garder ouverte, sans que vous ayez à définir une hauteur.
Comme pour l'image d'arrière-plan, vous devez penser à comment il va se comporter. Voulez-vous simplement qu'il apparaisse dans une bande le long de la haut? Si vous utilisez Mr Étranger solution, sachez que l'image va s'étirer de plus en plus large et de commencer à regarder bizarre. Nous avons donc besoin de plus d'informations sur ce que vous essayez de faire ici.