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?
.panel
de 600 pixeles. Nadie sale de el.panel-imagen
es 100% de ancho, lo que viene ser el total de 600px del.panel
. entonces tú imagen será de 600 pixeles