1

Tengo este código html:

<div class="panel">
  <div class="panel-imagen">
    <img src="img/coliseo.jpg">
  </div>
</div>

Y tengo este css:

.panel{
    width: 600px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 5px 0;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 1px 1px 1px #ccc;
    position: relative;
}

.panel-imagen{
    width: 100%;
    height: 300px;
    margin-top: 30px;
}

.panel-imagen img{
    width: 100%;
    border-radius: 4px;
}

El problema es que la imagen se sale del div panel-imagen, ya le he buscado mil formas y no he podido solucionar el problema.

Por que esta pasando esto? Como lo soluciono?

6
  • No revisaste que otros estilos más abajo pueda ser la causa? Porque así como está funciona bien Commented el 3 abr. 2022 a las 0:59
  • Todo respeta al padre .panel de 600 pixeles. Nadie sale de el Commented el 3 abr. 2022 a las 1:00
  • @NarcisoAifuz esos estilos son todos los que tengo de momento Commented el 3 abr. 2022 a las 1:01
  • @NarcisoAifuz y entonces por que la imagen no respeta las medidas de su contenedor? Commented el 3 abr. 2022 a las 1:02
  • Tu .panel-imagen es 100% de ancho, lo que viene ser el total de 600px del .panel. entonces tú imagen será de 600 pixeles Commented el 3 abr. 2022 a las 1:02

1 respuesta 1

0

Este es un ejemplo de cómo la imagen sobresale de su contenedor padre.

.panel{ 
 width: 300px; 
 margin-top: 10px; 
 margin-left: auto;
 margin-right: auto; 
 padding: 10px 5px 0; 
 background-color: #fff; 
 border-radius: 4px; 
 border: 1px solid #eee; 
 box-shadow: 1px 1px 1px #ccc; 
 position: relative; 
}

.panel-imagen{ 
 width: 100%; 
 height: 300px; 
 margin-top: 30px; 
} 

.panel-imagen img{ 
 border-radius: 4px; 
}
<div class="panel"> 

<div class="panel-imagen"> 
 
 <img src="https://placeimg.com/640/480/any"> 
 
</div> 
   </div>

Y este ejemplo es como debería está bien:

.panel{ 
 width: 300px; 
 margin-top: 10px; 
 margin-left: auto;
 margin-right: auto; 
 padding: 10px 5px 0; 
 background-color: #fff; 
 border-radius: 4px; 
 border: 1px solid #eee; 
 box-shadow: 1px 1px 1px #ccc; 
 position: relative; 
}

.panel-imagen{ 
 width: 100%; 
 height: 300px; 
 margin-top: 30px; 
} 

.panel-imagen img{ 
 width: 100%; 
 border-radius: 4px; 
}
<div class="panel"> 

<div class="panel-imagen"> 
 
 <img src="https://placeimg.com/640/480/any"> 
 
</div> 
   </div>

Si de igual te surge algún problema, debe ser algo en HTML o CSS. A mí me funciona bien como también aquí.

3
  • A mi se me sigue desbordando y con todas las imágenes que he puesto pasa lo mismo Commented el 3 abr. 2022 a las 1:29
  • Bueno. Si no revisa bien tu código, seguirá el dolor de cabeza. Debe ser otro estilo en algún lado. Y si eso es todo tu código, entonces que pasa? Será mejor borrar todo y empezar de cero y bien cuidado, ya que es poco código y el único como dijiste Commented el 3 abr. 2022 a las 1:33
  • Sigue dando problemas, el ancho del padre si lo respeta pero el alto no Commented el 3 abr. 2022 a las 2:25

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.