2

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:

introducir la descripción de la imagen aquí

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!

1
  • Lograste solucionarlo ? de alguna forma te sirvió la respuesta ? el 20 ago. 2019 a las 17:30

1 respuesta 1

0

me toco utilizar imágenes de Internet , solo cambia width: 100%; por width: auto; de la clase .slider img{ y eso pone la imagen como se debe de ver, también cambia el padding: 0; por padding: 10; de la clase .slider ul{ y eso centra la imagen revisa este snipet

.slider{
    width: 100%;
    margin: auto;
    overflow: hidden;
    height: inherit;
}  
.slider{
    width: 100%;
    margin: auto;
    overflow: hidden;
    height: inherit;
}  
.slider ul{
    display:flex;
    padding: 10;
    width: 400%;
    animation: cambio 20s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
} 
.slider li{
    width:100%;
    list-style: none;
}

.slider img{
    width: auto;
}
@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:auto;
    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
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="hero container">
            <div class="slider">
                <figure class="hero-imagen-container">
                    <ul>
                        <li><img class="hero-imagen" src="https://venngage-wordpress.s3.amazonaws.com/uploads/2018/05/youtube-banner-template-1.png"></li>
                        <li><img class="hero-imagen" src="https://venngage-wordpress.s3.amazonaws.com/uploads/2018/05/youtube-banner-template-1.png"></li>
                    </ul>
                 </figure>
            </div>
    </section>

1
  • Ejecuta el snippet y le das Pagina completa el 16 ago. 2019 a las 21:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.