Ajustar imagen de fondo a div

334

Tengo una imagen de fondo en el siguiente div, pero la imagen se corta:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

¿Hay alguna manera de mostrar la imagen de fondo sin cortarla?

html css background-image

— Rajeev
fuente

¿La imagen es más grande que el div?

— grc

1

sí, la imagen es más grande que el div

— Rajeev

1

imagen de fondo: url (/media/img_1_bg.jpg); tamaño de fondo: contener; repetición de fondo: sin repetición;

— Waruna Manjula

672

Puede lograr esto con la background-sizepropiedad, que ahora es compatible con la mayoría de los navegadores .

Para escalar la imagen de fondo para que quepa dentro del div:

background-size: contain;

Para escalar la imagen de fondo para cubrir todo el div:

background-size: cover;

JSFiddle ejemplo

También existe un filtro para el soporte de IE 5.5+ , así como prefijos de proveedores para algunos navegadores más antiguos .

— grc
fuente

119

Si lo que necesita es que la imagen tenga las mismas dimensiones del div, creo que esta es la solución más elegante:

background-size: 100% 100%;

Si no, la respuesta de @grc es la más apropiada.

Fuente: http://www.w3schools.com/cssref/css3_pr_background-size.asp

— Alcantarilla
fuente

Finalmente encontré la solución para encajar todo el div con el fondo. ¡Gracias!

— Kamil Rykowski

55

pero esto estiraría la imagen ... ¿hay alguna manera de ajustar la imagen de fondo sin estirarla?

— Junaid

1

Sin embargo, la relación de aspecto se perdió.

— Estudiante el

@Learner Si cambia las dimensiones de una imagen sin recortar la imagen, la relación de aspecto se perderá el 99% del tiempo. Es de sentido común.

— Vaibhav Vishal

11

Puedes usar estos atributos:

background-size: contain;
background-repeat: no-repeat;

y tu código es así:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

— hojjat.mi
fuente

8

también usas esto:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

No sé sus valores div, pero supongamos que los tiene.

height: auto;
max-width: 600px;

De nuevo, esos son solo números aleatorios. Podría ser bastante difícil hacer la imagen de fondo (si lo desea) con un ancho fijo para el div, así que mejor use max-width. Y en realidad no es complicado llenar un div con una imagen de fondo, solo asegúrese de diseñar el elemento padre de la manera correcta, para que la imagen tenga un lugar al que pueda ir.

Chris

— cristiano
fuente

Enlace a una respuesta muy votada que habla sobre esta solución con más detalle: stackoverflow.com/questions/600743/… y le muestra cómo calcularla padding-top.

— John Lee