Pregunta Estirar y escalar fondo CSS


¿Hay alguna manera de obtener un fondo en CSS para estirar o escalar para llenar su contenedor?


607
2017-12-17 22:21


origen


Respuestas:


Para los navegadores modernos, puedes lograr esto usando background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover significa estirar la imagen, ya sea vertical u horizontalmente, por lo que nunca azulejos / repeticiones.

Eso funcionaría para Safari 3 (o posterior), Chrome, Ópera 10+, Firefox 3.6+ e Internet Explorer 9 (o posterior).

Para que funcione con versiones más bajas de Internet Explorer, pruebe estos CSS:

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

213
2017-12-21 02:11



Utilizar el CSS 3 propiedad background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Esto está disponible para los navegadores modernos, desde 2012.


556
2018-01-26 11:02



No es posible escalar una imagen con CSS, pero se puede lograr un efecto similar de la siguiente manera.

Use este marcado:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

con el siguiente CSS:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

y deberías haber terminado!

Para escalar la imagen a "sangrado completo" y mantener la relación de aspecto, puede hacer esto en su lugar:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

¡Funciona bastante bien! Sin embargo, si se recorta una dimensión, se recortará en un solo lado de la imagen, en lugar de recortarla de manera uniforme en ambos lados (y centrado). Lo he probado en Firefox, Webkite Internet Explorer 8.


171
2017-12-23 13:01



Utilizar el atributo de tamaño de fondo  en CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDITAR:  Modernizr apoyos detección de soporte de tamaño de fondo. Puede usar una solución de JavaScript escrita para trabajar como lo necesite y cargarla dinámicamente cuando no haya soporte. Esto mantendrá el código mantenible sin recurrir a ataques intrusivos de CSS para ciertos navegadores.

Personalmente utilizo un script para manejarlo usando jQuery, es una adaptación de imgsizer. Como la mayoría de los diseños que ahora uso% de ancho para diseños fluidos en todos los dispositivos, hay una ligera adaptación a uno de los bucles (teniendo en cuenta tamaños que no siempre son del 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDITAR: Usted también podría estar interesado en jQuery CSS3 Finaliz [s] e.


161
2017-07-29 10:55



Prueba el artículo tamaño de fondo. Si usa todo lo siguiente, funcionará en la mayoría de los navegadores, excepto en Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

32
2017-11-02 11:25



No actualmente. Estará disponible en CSS 3, pero tomará un tiempo hasta que se implemente en la mayoría de los navegadores.


16
2017-12-17 22:27



.style1 {
        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;
}

Trabaja en:

  • Safari 3+
  • Chrome Lo que sea +
  • IE 9+
  • Opera 10+ (Opera 9.5 soportó el tamaño de fondo pero no las palabras clave)
  • Firefox 3.6+ (Firefox 4 es compatible con la versión con prefijo de un proveedor)

Además, puedes probar esto para una solución ie

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

Crédito a este artículo por Chris Coyier http://css-tricks.com/perfect-full-page-background-image/


15
2018-05-13 15:06



Definir "estirar y escalar" ...

Si tienes un formato de mapa de bits, generalmente no es genial (gráficamente hablando) para estirarlo y tirar de él. Puedes usar patrones repetibles para dar la ilusión del mismo efecto. Por ejemplo, si tiene un degradado que se vuelve más claro hacia la parte inferior de la página, usaría un gráfico de un solo píxel de ancho y la misma altura que su contenedor (o preferiblemente más grande para tener en cuenta la escala) y luego colocarlo en mosaico en el página. Del mismo modo, si el degradado se ejecutara en la página, sería de un píxel de alto y más ancho que su contenedor y se repetirá en la página.

Normalmente, para dar la ilusión de que se extiende hasta llenar el contenedor cuando el contenedor crece o se encoge, la imagen se hace más grande que el contenedor. Cualquier superposición no se mostraría fuera de los límites del contenedor.

Si desea un efecto que dependa de algo así como una caja con bordes curvos, entonces debe pegar el lado izquierdo de su caja al lado izquierdo de su contenedor con suficiente superposición (dentro de lo razonable) sin importar cuán grande sea el contenedor, nunca se queda sin fondo y luego superpones una imagen del lado derecho de la caja con bordes curvos y la colocas a la derecha del contenedor. Por lo tanto, a medida que el contenedor se encoge o crece, el efecto de la caja curva parece encogerse o crecer con él; de hecho no lo hace, pero da la ilusión de que eso es lo que está sucediendo.

En cuanto a realmente hacer que la imagen se encoja y crezca con el contenedor, necesitaría usar algunos trucos de capas para hacer que la imagen parezca funcionar como fondo y algo de javascript para redimensionarla con el contenedor. No hay forma actual de hacer esto con CSS ...

Si usas gráficos vectoriales, me temo que estás fuera de mi dominio de la experiencia.


5
2017-12-17 22:28