Si está buscando cómo hacer una IMAGEN DE FONDO EN PANTALLA COMPLETA, vaya aquí.
Mi amigo Richard vino a verme recientemente con una simple pregunta de CSS:
¿Hay alguna manera de cambiar el tamaño de una imagen de fondo? 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. también, haga que cambie de tamaño más grande o más pequeño a medida que cambia la ventana del navegador. también, asegúrese de que conserve su proporción (no se estire de forma extraña). también, no causa barras de desplazamiento, solo se corta verticalmente si es necesario. también, aparece en la página como una etiqueta en línea.
Vaya, eso es una tarea difícil. Mi primer pensamiento fue … uhm, No. Pero, por supuesto, este es el tipo de desafío que disfruto, así que me puse a pensar. Al final, encontré una solución bastante buena y la convertimos en un pequeño proyecto bastante ordenado. Primero, revise el proyecto terminado, luego le mostraré cómo se hizo:
Proyecto terminado: ¿Cuál es el clima? Desconectado
Continúe y cambie el tamaño de la ventana de su navegador y observe cómo la imagen cambiará de tamaño para adaptarse. No lo hace “sobre la marcha”, pero funciona. También cumple con todos los demás requisitos: sin barras de desplazamiento y conserva la proporción de píxeles.
Primer intento
Bueno, lo primero que pensé fue que esto realmente necesita ser una imagen de fondo CSS. Esto llenará la pantalla de borde a borde si la imagen es lo suficientemente grande. También se puede centrar, así que pensé que sería lo suficientemente bueno. Las ventanas grandes del navegador revelarán más de la imagen y las más pequeñas menos de la imagen. Si se aplica a la etiqueta del cuerpo, llenará la pantalla muy bien sin barras de desplazamiento. Pensé que era una solución bastante buena, incluso si técnicamente no se puede cambiar de tamaño, ya que no se puede establecer el tamaño de una imagen de fondo CSS. Así es como hice este primer enfoque.
<head>
....
<script type="text/javascript" src="https://css-tricks.com/how-to-resizeable-background-image/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.source-image").hide();
var $source = $("img.source-image").attr("src");
$('#page-body').css({
'backgroundImage': 'url(' + $source +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center'
});
});
</script>
</head>
<body id="page-body">
<img class="source-image" src="images/image.jpg" alt="" />
</body>Lo adivinaste, jQuery. El código anterior ocultará la imagen en la página, pero enganchará su atributo “src” y lo aplicará como fondo al elemento del cuerpo (a través de su ID único “page-body”). Vea un ejemplo de esto en acción.
Segundo intento (mejor)
Si bien el primer intento hizo un trabajo decente, fracasó en el nivel más fundamental: no fue “redimensionable”. Así que es hora de otra toma. Para controlar el tamaño de una imagen que se muestra en la pantalla sin alterar literalmente el archivo en sí, es mostrarlo en línea con la etiqueta . Con la etiqueta img, podemos establecer atributos de “ancho” y “alto” para controlar el tamaño de la imagen. Si podemos tener en nuestras manos el ancho de píxel exacto de la ventana del navegador, podemos usar ese número en el atributo de ancho de la imagen y controlar su tamaño manteniendo la proporción.
Podemos, nuevamente, usar jQuery y el complemento de dimensiones para obtener el ancho de la ventana de nuestro navegador. Luego usaremos ese número para establecer el atributo de ancho en la imagen, al cual le daremos un nombre de clase único “imagen-fuente”. Tendremos que hacer esto tan pronto como el DOM esté listo para que suceda antes de que la imagen comience a cargarse. También podemos hacer esto (FTW) cada vez que se cambia el tamaño de la ventana. Así es como se reduce:
<script type="text/javascript" src="https://css-tricks.com/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
$(window).bind("resize", function(){
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
});
});
</script>Para que esta imagen en línea se comporte más como una imagen de fondo, podemos usar esa clase única que aplicamos para aplicar un posicionamiento absoluto.
img.source-image {
position: absolute;
top: 0;
left: 0;
}Debido a este posicionamiento absoluto, cualquier cosa que desee colocar encima también necesitará posicionamiento y un valor de índice z más alto. Si su imagen de origen es particularmente alta, o la ventana de su navegador es particularmente ancha, la imagen podría fácilmente volverse más alta que la ventana de su navegador y forzar una barra de desplazamiento vertical. Para evitar esto, simplemente establezca el valor de desbordamiento en su cuerpo en oculto:
body {
overflow: hidden;
}Tercer intento (mejor)
¡Olvídese de este negocio de JavaScript! Gracias al comentario de Anders que señala la versión de Stu Nicholls, ¡aquí hay una manera aún mejor de manejar esto sin la necesidad de ningún javascript!
Dado que ya tenemos una clase única en la imagen, la imagen está absolutamente posicionada y la cosa de las barras de desplazamiento ya está resuelta, establezcamos el ancho usando un porcentaje directamente en el CSS:
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}Vea una demostración de esto en acción. Esta es la mejor solución hasta ahora, porque el cambio de tamaño ocurre sobre la marcha para una agradable sensación de fluidez y no depende de ningún javascript en absoluto.
Más sobre WhatsTheWeather.net
Acabo de hacer el diseño simple de What’s The Weather (actualización de noviembre de 2013: ahora sin conexión), pero Richard hizo una codificación genial para que funcione. Por lo que tengo entendido, es una cadena de 3 API diferentes. Primero, obtiene su dirección IP y usa una API para convertirla en una ciudad y un estado. Luego usa alguna API meteorológica para obtener el clima actual. Luego, usa la API de Flickr para obtener una imagen aleatoria con etiquetas que coinciden con el clima. Si no puede obtener su zip, se lo pedirá, como en el iPhone (que también lo detecta automáticamente y lo maneja de manera un poco diferente). Todo hecho con Ruby on Rails. ¡Baile bastante elegante!