jquery - tamaño - insertar imagen html url
Imagen de fondo escalable de CSS o jQuery sin espacio en blanco debajo cuando la altura de img es menor que la altura de la ventana (5)
¿Has visto https://github.com/weightshift/The-Personal-Page ?
Utiliza el plugin jQuery de contrafuerza que hace el trabajo bastante bien.
Viejo, pero bien, lo sé. Esta pregunta se hace muchas veces y, sin embargo, no he tenido una respuesta definitiva. Imagen de fondo escalable, preferiblemente solo CSS, dispuesto a usar jQuery como soporte si es necesario. Un problema con el que me he encontrado mucho (es decir, con la imagen de fondo de CSS3) es el espacio vacío debajo de una imagen cuando su altura es menor que la altura de las ventanas del navegador. (ejemplo: http://css-tricks.com/examples/ImageToBackgroundImage/ )
Esto es lo que me gustaría lograr:
- Mantener la relación de aspecto
- Recortar la altura y el ancho de la imagen si la ventana del navegador es más pequeña que el tamaño de la imagen
- Imagen centrada en la página para que el recorte no compense el flujo de la página
Aquí hay algunos ejemplos que ilustran estos objetivos (aunque creo que se puede hacer mejor):
- http://www.thakoon.com/collections/thakoon-addition/pre-fall-2011
- http://whatstheweather.net/weather/submit
Gracias, gracias, gracias.
Aqui tienes. Usando jQuery. La etiqueta IMG se establece como la imagen de fondo usando position:absolute; z-indez:0; position:absolute; z-indez:0; A medida que cambia el tamaño de la ventana, la imagen cambiará de tamaño según corresponda. Compatible con navegador cruzado
$(window).resize(function(){
var bgwidth = $(window).width(),
bgheight= $(window).height();
$(''img'').attr({width:bgwidth, height:bgheight});
})
Ver ejemplo de trabajo en http://jsfiddle.net/LBvjR/
Un amigo me recomendó Supersize, ¡era exactamente lo que estaba buscando! Usó la función central en lugar de la versión de presentación de diapositivas. http://www.buildinternet.com/project/supersized/
css:
#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}
html:
<div id="wallpaper"><img src="bg.jpg"></div>
Puedes usar algo como:
selector {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
pero tiene incompatibilidades de navegador.
.
Las soluciones alternativas te obligarán a usar HTML.
Ejemplos: