Imagen de fondo CSS para ajustarse a la altura, el ancho debe escalarse automáticamente en proporción

Question

Imagen de fondo CSS para ajustarse a la altura, el ancho debe escalarse automáticamente en proporción

Quiero que la imagen de fondo se ajuste a la altura del div, ¿hay una manera de hacerlo? background-size:cover; ajuste solo con la autoscale de ancho y alto (necesito el efecto opuesto). Gracias.

35

css css3

Author: tanzio, 2013-11-20

Source

5 answers

Sé que esta es una respuesta antigua, pero para otros que buscan esto; en su CSS intente:

background-size: auto 100%;

64

Author: Ajikan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-11 20:27:38

Intenta

.something { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;  
}

14

Author: Beep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-16 16:27:08

body.bg {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    background: white url(../images/bg-404.jpg) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}   
Try This


    body.bg {
    	background-size: cover;
    	background-repeat: no-repeat;
    	min-height: 100vh;
    	background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    }	
    <body class="bg">


    	
    </body>

5

Author: Diego Quispe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-03 15:10:26

Acabo de tener el mismo problema y esto me ayudó con background-size:cover en body

html{
    height: auto;
    min-height: 100%;
}

0

Author: Simon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-10 16:42:10

score 31 · Accepted Answer

background-size: contain;

Me conviene

31

Author: tanzio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-20 10:58:40