tamaño - ¿Hay alguna forma de utilizar el ancho y la altura máximos para una imagen de fondo?

insertar imagen html url

Question

Que simple

Mover mi diseño en un territorio fluido, trabajando en imágenes escalables. Usar la etiqueta img y configurar el ancho máximo al 100% funciona perfectamente, pero prefiero usar un div con la imagen configurada como fondo.

El problema con el que me estoy topando es que la imagen no se adapta al tamaño del div que está en el fondo. ¿Alguna forma de agregar marcado al código de fondo para configurarlo al 100% de ancho de su contenedor?

#one {
    background: url(''../img/blahblah.jpg'') no-repeat;
    max-width: 100%;
}

Answer 1

Como dijo treintadot, puedes usar la sintaxis de background-size CSS3:

Por ejemplo:

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

Sin embargo, como también lo indica treintadot, esto no funciona en IE6, 7 y 8.

Consulte los siguientes enlaces para obtener más información sobre background-size : http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

Desafortunadamente, no hay un tamaño min (o max ) de fondo en CSS, solo se puede usar background-size . Sin embargo, si está buscando una imagen de fondo receptiva, puede usar las unidades Vmin y Vmax para que la propiedad de background-size logre algo similar.

ejemplo:

#one {
    background:url(''../img/blahblah.jpg'') no-repeat;
    background-size:10vmin 100%;
}

que establecerá la altura al 10% de la vista más pequeña que tenga, ya sea vertical u horizontal, y establecerá el ancho al 100%.

Lea más sobre las unidades de css aquí: https://www.w3schools.com/cssref/css_units.asp

Answer 3

Parece que estás tratando de escalar la imagen de fondo? Hay un gran artículo en la siguiente página de referencia donde puedes usar css3 para lograr esto.

Y si no leo la pregunta, acepto humildemente los votos. (Aun así es bueno saberlo)

Por favor considere el siguiente código:

#some_div_or_body { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Esto funcionará en todos los principales navegadores, por supuesto, no es fácil en IE. Hay algunas soluciones alternativas, como el uso de los filtros de Microsoft:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''.myBackground.jpg'', sizingMethod=''scale'');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''myBackground.jpg'', sizingMethod=''scale'')";

Hay algunas alternativas que se pueden usar con un poco de tranquilidad utilizando jQuery:

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery:

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass(''bgheight'');
    } else {
        $bg
            .removeClass()
            .addClass(''bgwidth'');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

¡Espero que esto ayude!

Src: Imagen de fondo de página completa perfecta

Answer 4

Puedes hacer esto con background-size :

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

Hay muchos otros valores además de la cover que puede establecer background-size , vea cuál le funciona: https://developer.mozilla.org/en/CSS/background-size

Especificaciones: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

Funciona en todos los navegadores modernos: http://caniuse.com/#feat=background-img-opts