1

Como puedo hacer que la imagen ocupe todo el contenedor? Mi idea es que quede como se muestra en la foto. Siendo elmarco rojo la imagen y el marco negro redondeado el contenedor de imagenes

introducir la descripción de la imagen aquí

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 55%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}
 <div id="article">
            <div id="slider">
                <figure>
                    <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
                </figure>
            </div>
        </div>

1 respuesta 1

2

Debes poner un width: 100%; a la imagen Y quitar el margin del figure. El único problema es que la imagen así invade los bordes redondeados, puedes añadir un padding al figure:

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 50%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}
figure{
    margin: 0px;
}
img{
    width: 100%;
    height: auto;
}
<div id="article">
    <div id="slider">
        <figure>
            <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
        </figure>
    </div>
</div>

Segundo snippet: Aquí se ve recortada la imagen por el div.

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 55%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
    position: relative;
    overflow: hidden;

}
figure{
    margin: 0px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
    display: inline;
    margin: 0 auto;
    padding: 0;
}
<div id="article">
    <div id="slider">
        <figure>
            <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
        </figure>
    </div>
</div>

5
  • estoy tratando de que la imagen al ocupar mas que el contenedor solo se vea aquello que este dentro del contenedor article. En la foto del esquema lo rojo seria la foto y lo nregro en div. Lo que quiero que se visualice es solo lo que este dentro del espacio del contenedor. Como si fuesa una capa encima de la otra. Vi que con z-index se podria hacer pero no lo logro realizar Commented el 9 nov. 2017 a las 17:49
  • Deja ver si entendí, ¿quieres que la imagen se vea afectada por el div como si estuviese recortada?
    – Rene Limon
    Commented el 9 nov. 2017 a las 17:51
  • Eso es, la idea es que la imagen quede recortada por el tamaño del contenedor Commented el 9 nov. 2017 a las 17:54
  • He editado mi respuesta
    – Rene Limon
    Commented el 9 nov. 2017 a las 18:02
  • gracias por la ayuda amigo ;D Commented el 9 nov. 2017 a las 18:03

Tu Respuesta

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

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