Centrer une image et avoir un width auto
Résolu
lamontange
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un site à lecture horizontale et je n'arrive pas à centrer une image :(
Mes CSS :
.roundy { max-height :100vh; width: auto; margin-left: auto; margin-right: auto; tex-align: center;}
J'ai essayé pas mal de choses, de positions, de margin... la photo reste toujours à gauche (mais à height: 100vh), ou prend width: 100vw (selon les CSS),ce qui fait que la photo dépasse en hauteur.
Merci pour votre aide,
LM
Macintosh / Chrome 106.0.0.0
A voir également:
- Centrer une image et avoir un width auto
- Image iso - Guide
- Légender une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Transformer une image en icone - Guide
3 réponses
Comme ça, ça fonctionne :
.a-img-txt{ display:grid; } /* les enfants se superposent */ .a-img-txt>*{ grid-area:1/1/-1/-1; /* raccourci pour grid-row et grid-column */ } .a-img{ max-height: 100vh; display: block; margin-left: auto; margin-right: auto; } /* le texte */ .a-txt{ display:flex; justify-content:center; align-items:center; color:#fff; opacity:0; filter:invert(0); /* antibug si effet sur a-img */ transition:opacity .8s; } /* les couleurs c1 et c2 */ .c1{ background:#ff6600cc; /* avec alpha */ } .c2{ background:#6600ffcc; /* avec alpha */ } /* le survol */ .a-txt:hover{ opacity:1; } .a-img-txt:hover .a-img{ filter:invert(0); }
Bonne soirée ;)
un :
display: block; margin-left: auto; margin-right: auto
fout en l'air mon animation :((((((
.a-img-txt{ display:grid; } /* les enfants se superposent */ .a-img-txt>*{ grid-area:1/1/-1/-1; /* raccourci pour grid-row et grid-column */ } .a-img{ max-height: 100vh; } } /* le texte */ .a-txt{ display:flex; justify-content:center; align-items:center; color:#fff; opacity:0; filter:invert(0); /* antibug si effet sur a-img */ transition:opacity .8s; } /* les couleurs c1 et c2 */ .c1{ background:#ff6600cc; /* avec alpha */ } .c2{ background:#6600ffcc; /* avec alpha */ } /* le survol */ .a-txt:hover{ opacity:1; } .a-img-txt:hover .a-img{ filter:invert(0); } /* la déco */ img{ max-width:100%; height:auto; } a{ text-decoration:none; }
Je n'ai plus de transition, ni de texte :/
Bonne soirée,
LM