Centrer une image et avoir un width auto Résolu

Question

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

lamontange · Answer

Mon HTML : asiat

lamontange · Answer

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

lamontange · Answer

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 ;)

Centrer une image et avoir un width auto

3 réponses

Discussions similaires

Newsletters