html - repita - div con imagen de fondo
Ajustar la imagen de fondo a div (5)
Es posible cambiar la anchura y la altura de tu div o establecer el tamaño del fondo.
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 forma de mostrar la imagen de fondo sin cortarla?
Puede lograr esto con la propiedad de background-size , 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;
También existe un filtro para el soporte de IE 5.5+ , así como prefijos de proveedores para algunos navegadores más antiguos .
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">
Si lo que necesitas 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
También usas esto:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
No conozco tus valores divinos, pero supongamos que los tienes.
height: auto;
max-width: 600px;
De nuevo, esos son solo números al azar. Podría ser bastante difícil hacer la imagen de fondo (si lo desea) con un ancho fijo para el div, por lo que es mejor utilizar el ancho máximo. Y en realidad no es complicado llenar un div con una imagen de fondo, solo asegúrate de que el estilo del elemento padre sea el correcto, para que la imagen tenga un lugar donde pueda entrar
Chris