html - tamaño - La imagen de fondo CSS se ajusta al ancho, la altura debe escalarse automáticamente en proporción

expandir imagen css

Question

yo tengo

body {
background: url(images/background.svg);
}

El efecto deseado es que esta imagen de fondo tendrá un ancho igual al de la página, cambiando la altura para mantener la proporción. por ejemplo, si la imagen original es 100 * 200 (cualquier unidad) y el cuerpo tiene 600px de ancho, la imagen de fondo debe terminar con 1200px de altura. La altura debería cambiar automáticamente si se cambia el tamaño de la ventana. es posible?

En este momento, Firefox parece que está ajustando la altura y luego ajustando el ancho. ¿Es esto quizás porque la altura es la dimensión más larga y está tratando de evitar el recorte? Quiero recortar verticalmente, luego desplazarme: no hay repetición horizontal.

Además, Chrome está colocando la imagen en el centro, sin repetición, incluso cuando se background-repeat:repeat en background-repeat:repeat se da explícitamente, que es la predeterminada de todos modos.

Answer 1

Basado en los consejos de https://developer.mozilla.org/en-US/docs/CSS/background-size , termino con la siguiente receta que me funcionó

body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url(''index.png'');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}

Answer 2

Configurar el tamaño del fondo no ayuda, la siguiente solución funcionó para mí:

.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}

Básicamente recorta la imagen y la hace encajar, background-size: contain/cover aún no lo hizo encajar.

Answer 3

Esto es lo que funcionó para mí:

background-size: auto 100%;

Answer 4

Hay una propiedad CSS3 para esto, a saber background-size ( verificación de compatibilidad ). Mientras que uno puede establecer valores de longitud, generalmente se usa con los valores especiales que contain y cover . En su caso específico, debe usar cover :

body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}

Plantas de huevo para contain y cover

Lo siento por el mal juego de palabras, pero voy a usar la foto del día de Biswarup Ganguly para la demostración. Digamos que esta es su pantalla, y el área gris está fuera de su pantalla visible. Para la demostración, voy a asumir una relación de 16x9.

Queremos utilizar la imagen del día antes mencionada como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos establecer la propiedad de background-size en una longitud fija, pero nos centraremos en contain y cover . Tenga en cuenta que también asumo que no estropeamos el ancho y / o la altura del body .

contain

contain

Escale la imagen, al tiempo que conserva su relación de aspecto intrínseca (si la hay), hasta el tamaño más grande, de manera que tanto su ancho como su altura puedan caber dentro del área de posicionamiento del fondo.

Esto asegura que la imagen de fondo siempre esté completamente contenida en el área de posicionamiento de fondo, sin embargo, podría haber algún espacio vacío lleno de su background-color en este caso:

cover

cover

Escale la imagen, conservando su relación de aspecto intrínseca (si existe), hasta el tamaño más pequeño, de modo que tanto su ancho como su altura puedan cubrir completamente el área de posicionamiento del fondo.

Esto asegura que la imagen de fondo cubra todo. No habrá ningún background-color visible, sin embargo, dependiendo de la proporción de la pantalla, se puede cortar una gran parte de su imagen:

Demostración con código actual

div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}

<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it''s fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don''t see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Answer 5

La imagen de fondo no está Perfecta, entonces su problema de creación de css, por lo que su archivo css cambia al siguiente código

html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}

%; tamaño de fondo: 100% 100%; "

Answer 6

No estoy seguro de qué es exactamente lo que estás buscando, pero realmente deberías revisar estas excelentes publicaciones en el blog escritas por Chris Coyier de CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Lea las descripciones de cada uno de los artículos y vea si son lo que está buscando.

El primero responde a la siguiente pregunta:

¿Hay alguna manera de hacer que una imagen de fondo se pueda cambiar de tamaño? Al igual que en, rellene el fondo de una página web de borde a borde con una imagen, sin importar el tamaño de la ventana del navegador. Además, haga que el tamaño de la misma sea mayor o menor a medida que cambie la ventana del navegador. Además, asegúrate de que mantiene su proporción (no se estira raro). Además, no causa barras de desplazamiento, solo se corta verticalmente si es necesario. Además, entra en la página como una etiqueta en línea.

El objetivo de la segunda publicación es obtener lo siguiente, una "imagen de fondo en un sitio web que cubra toda la ventana del navegador en todo momento".

Espero que esto ayude.

Answer 7

Prueba esto,

element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Answer 8

Solo agrega esta una línea:

 .your-class {
height: 100vh;
}

vh es la altura de la ventana gráfica. Esto se escalará automáticamente para adaptarse a la ventana del navegador del dispositivo.

Compruebe más aquí: hacer div 100% de la altura de la ventana del navegador

Answer 9

Tuve el mismo problema, no pude cambiar el tamaño de la imagen al ajustar las dimensiones del navegador.

Código incorrecto:

html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}

Buen Código:

html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}

La clave aquí es la adición de este elemento -> background-size: contener;

Answer 10

body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}