Skip to main content
3 de 5
se añadieron 42 caracteres en el cuerpo
Richard
  • 1.5k
  • 3
  • 19
  • 52

Como hacer que una imagen respete un contenedor div

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. introducir la descripción de la imagen aquí

lo que tengo me da el siguiente resultado introducir la descripción de la imagen aquí

.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>
Richard
  • 1.5k
  • 3
  • 19
  • 52