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
- Légender une image - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Rechercher une image - 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