Me encanta el nuevo diseño http://thesixtyone.com. Me pregunto ¿cómo estirarán proporcionalmente la imagen para que se ajuste a todo el fondo? ¿Están usando CSS/Javascript u otros trucos?¿Cómo estira TheSixyOne.com proporcionalmente la imagen a página completa?
Se utilizan tanto CSS como Javascript.
Toma el mayor de alto o ancho, establece la dimensión de la imagen correspondiente a eso, luego calcula la relación de la dimensión original a la nueva dimensión, luego aplica esa relación a la dimensión opuesta.
Por ejemplo. Supongamos que la foto original era 100x100. Si su pantalla es 200x100; luego estira la primera dimensión (200 es más grande que 100) para caber. Esta es una relación de 2: 1, por lo que tiene la misma resistencia a la otra dimensión. La imagen resultante es en realidad 200x200.
Agregue un toque más código para mantener todo centrado (para que las partes fuera de pantalla de la dimensión del arrendador sean iguales), y listo.
En mi ejemplo, la imagen se movería hasta 50, de manera que se ve el (el tamaño de la pantalla) media 100 de la imagen que se ha estirado a 200.
La imagen es en realidad una etiqueta DIV con la propiedad de la imagen de fondo establecida.
No estoy seguro que la biblioteca utilizando they'e pero en su fuente Javascript Hice una búsqueda de "redimensionar" y encontrado:
Event.observe(window,"resize",t61.background.sync_size);
que parece que están adjuntando un controlador de eventos para window.onresize.
Parece que están centrando la imagen cada vez que cambia el tamaño de la página – Phen