Image pleine largeur sans déformation
scarvi
Messages postés
25
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je tiens à dire tout d'abord que je suis débutant en création de site.
Je suis en train de créer un site vitrine (type one page), et dans le design du site, j'aimerais séparer les parties de la page par de grandes images qui prennent toute la largeur de la fenêtre du navigateur.
Pour faire simple, j'aimerais que l'image :
- soit toujours en largeur 100%, peut importe la taille de la fenêtre,
- garde toujours la même hauteur, peut importe la taille de la fenêtre,
- l'image ne soit pas déformée (étirée), mais peut être rognée sur la largeur pour garder la hauteur fixe.
Pour le moment j'ai essayé en ouvrant une div vide avec une image en background:
Avec ce code, j'ai bien une image qui ne se déforme pas et qui reste à 100% en largeur, mais je ne sais pas comment fixer une hauteur (quitte à ce que l'image soit rognée en largeur).
Merci d'avance !
Je tiens à dire tout d'abord que je suis débutant en création de site.
Je suis en train de créer un site vitrine (type one page), et dans le design du site, j'aimerais séparer les parties de la page par de grandes images qui prennent toute la largeur de la fenêtre du navigateur.
Pour faire simple, j'aimerais que l'image :
- soit toujours en largeur 100%, peut importe la taille de la fenêtre,
- garde toujours la même hauteur, peut importe la taille de la fenêtre,
- l'image ne soit pas déformée (étirée), mais peut être rognée sur la largeur pour garder la hauteur fixe.
Pour le moment j'ai essayé en ouvrant une div vide avec une image en background:
#section1{
width:100%;
background: url(section1.png) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
Avec ce code, j'ai bien une image qui ne se déforme pas et qui reste à 100% en largeur, mais je ne sais pas comment fixer une hauteur (quitte à ce que l'image soit rognée en largeur).
Merci d'avance !
A voir également:
- Image pleine largeur sans déformation
- Boite gmail pleine - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
1 réponse
Salut,
pour la hauteur c'est avec la propriété height(hauteur en anglais).
Dans votre CSS rajoute après
width:100%;
height:30%;<!-- ou une valeur en pixel(unité px), quadratin typographique(em), point typographique(pt)-->
Il faut aussi que le contenu du container ne dépasse pas cette taille en hauteur.
pour la hauteur c'est avec la propriété height(hauteur en anglais).
Dans votre CSS rajoute après
width:100%;
height:30%;<!-- ou une valeur en pixel(unité px), quadratin typographique(em), point typographique(pt)-->
Il faut aussi que le contenu du container ne dépasse pas cette taille en hauteur.
cover ajuste l'image le mieux possible par rapport à la taille d'affichage de la div sans la déformer et en rognant le moins possible.