contain

Escala la imagen lo más grande posible sin recortar ni estirar la imagen.

Estaba tratando de replicar un efecto CSS que vi en un sitio web social. Utiliza 3 imágenes de fondo para formar un "fondo de publicación" (los usuarios tienen que pagar por ello). Aquí está el efecto ideal https://jsfiddle.net/Yun93/7hmgnjod/2/

Pregunta:

Pero cuando estaba jugando con estas 3 imágenes, no entendía por qué la segunda imagen parece extenderse con background-size: contain mientras que las otras 2 no. ¡Todos tienen el mismo ancho ! ¡Todos deberían comportarse igual! ¿Por qué?

Y cambiando todo background-size: contain a background-size: cover, la segunda imagen también se comporta de manera diferente. Aagin, ¿por qué?


Código: la segunda imagen parece alargarse con background-size: contain

* {
box-sizing: border-box;
}

body {
width: 100vw;
height: 100vh;
} 

.container {
width: 700px;
margin: 0 auto;
}

.bg1 {
background-image: url('https://imgur.com/bTn61bZ.png');
background-size:contain;
/* background-size:cover; */
height: 35px;
}

.bg2 {
background-image: url('https://imgur.com/SjxzI9V.png');
background-size:contain;
/* background-size:cover; */

}


.bg3 {
background-image: url('https://imgur.com/oNTSRHW.png');
background-size:contain;
/* background-size:cover; */
height: 68px;
}

.bg1, .bg2, .bg3 {
width: 100%;
}

.content {
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
    <div class="bg1"></div>
    <div class="bg2">
        <div class="content">
            People have their post here.
        </div>
    </div>
    <div class="bg3"></div>
</div>
</body>
</html>
css
1
Rick 13 oct. 2019 a las 06:27

1 respuesta

La mejor respuesta

Cuando usa background-size: contain su imagen no se estira, pero se escala para llenar el espacio disponible sin perder su relación ancho / alto. En su caso, su segunda imagen tiene muy poca altura (consulte https://i.imgur.com/ SjxzI9V.png) para que pueda ocupar todo el ancho de su contenedor. En el violín, el ancho del contenedor es de 550 px y es de 700 px en tu código.

2
giuseppedeponte 13 oct. 2019 a las 09:35