Mi piace il nuovo design http://thesixtyone.com. Mi chiedo come allungano proporzionalmente l'immagine per adattarsi all'intero background? Stanno usando CSS/Javascript o altri trucchi?In che modo TheSixyOne.com estende proporzionalmente l'immagine alla pagina intera?
Vengono utilizzati sia CSS che Javascript.
Aumenta l'altezza o la larghezza, imposta la dimensione dell'immagine corrispondente, quindi calcola il rapporto tra la dimensione originale e la nuova dimensione, quindi applica tale rapporto alla dimensione opposta.
Ad esempio. Supponiamo che la foto originale fosse 100x100. Se lo schermo è 200x100; quindi allunga la prima dimensione (200 è maggiore di 100) per adattarsi. Questo è un rapporto 2: 1, quindi fa lo stesso effetto sull'altra dimensione. L'immagine risultante è in realtà 200x200.
Aggiungere un tocco più codice per mantenere centrato il tutto (quindi le parti fuori schermo della dimensione del locatore sono uguali) e voilà.
Nel mio esempio, l'immagine sarebbe stato spostato in crescita del 50, in modo che si vede la 100 (la dimensione dello schermo) centro della foto che è stata allungata a 200.
L'immagine è in realtà un tag DIV con l'insieme di proprietà dell'immagine di sfondo.
Non so cosa biblioteca they'e usando ma nella loro sorgente JavaScript Ho fatto una ricerca per "ridimensionare" e ha trovato:
Event.observe(window,"resize",t61.background.sync_size);
che sembra che stanno collegando un gestore di eventi per window.onresize.
Sembra che stiano centrando l'immagine ogni volta che la dimensione della pagina cambia – Phen