Tengo lo siguiente en html5 y css3, el problema es que la imagen no me respeta el contenedor div y quiero que la imagen se ajuste automáticamente al tamaño del contenedor para que se mantenga dentro de dicho contenedor marcado con un fondo rojo.
en el <div class="pleca2">
marcado con fondo azul ira otra imagen pero las 2 deben mantenerse dentro del <div class="columna">
logrando un resultado exactamente igual ya que cuento con las 3 imágenes que se muestran abajo.
lo que tengo me da el siguiente resultado
.contenedor-columnas {
width: 100%;
margin: auto;
text-align: center;
margin-bottom: 50px;
}
.columx2 {
width: 50%;
float: left;
padding: 20px 20px;
box-sizing: border-box;
}
.columna {
height: 200px;
background:red;
/*background: url("img/Texture_madera.png");*/
background-position: center;
background-attachment: contain;
background-size: cover;
}
.columx2 h1 {
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
color: #4e3224;
}
.columx2 img {
width: 100%;
margin: auto;
}
.pleca2 {
width: 100%;
height:20px;
background:blue;
}
.pleca2 img {
width: 100%;
}
<section class="contenedor-columnas">
<div class="columx2">
<div class="columna">
<h1>sombreros</h1>
<div class="pleca2">
<img src="img/Pleca cafe-01.png" alt="">
</div>
<img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
</div>
</div>
<div class="columx2">
<div class="columna">
<h1>Accesorios</h1>
<div class="pleca2">
<img src="img/Pleca cafe-01.png" alt="" >
</div>
<img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
</div>
</div>
</section>
</div>
</div>
<div class="columx2">
<div class="columna">
<h1>Accesorios</h1>
<div class="pleca2">
<img src="img/Pleca cafe-01.png" alt="" >
</div>
<img src="img/Sombreros/aretes.png" alt="">
</div>
</div>
</section>