Espero que anden bien.
Tengo un inconveniente con la seccion Hero
, donde tengo un slider
que quiero acomodar que la imagen se vea toda, y bien en el centro.
Tengo las siguientes etiquetas:
<section class="hero container">
<div class="slider">
<figure class="hero-imagen-container">
<ul>
<li><img class="hero-imagen" src="./images/fibra1.jpg"></li>
<li><img class="hero-imagen" src="./images/fibra2.jpg"></li>
</ul>
</figure>
</div>
</section>
con la hoja de style:
.slider{
width: 95%;
margin: auto;
overflow: hidden;
height: inherit;
}
.slider ul{
display:flex;
padding: 0;
width: 400%;
animation: cambio 20s infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
.slider li{
width:100%;
list-style: none;
}
.slider img{
width:100%;
}
@keyframes cambio{
0% { margin-left: 0;}
20% { margin-left: 0;}
25% { margin-left: -100%;}
45% { margin-left: -100%;}
50% { margin-left: -200%;}
70% { margin-left: -200%;}
75% { margin-left: -300%;}
100% { margin-left: -300%;}
}
.hero{
height:300px;
background-color:#1c2227;
position:relative;
z-index:500;
display:grid;
grid-auto-flow:column;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.hero-imagen-container{
margin:0;
position:relative
}
.hero-imagen{
object-fit:contain
}
Tengo el problema que las imágenes no se ven muy bien, este es el resultado:
Como ven, la imagen esta cortada. agregue containt:content
pero no alcanzo. no encontré donde puede estar el error.
Agradezco por su tiempo, muchas gracias!