Как TheSixyOne.com пропорционально расширяет изображение к полной странице?
Я люблю новый дизайн http://thesixtyone.com. Я задаюсь вопросом, как они пропорционально расширяют изображение для установки целому фону? Они используют CSS/Javascript или другие приемы?
2 ответа
Используются как CSS, так и JavaScript.
Требуется больше высоты или ширины, устанавливает соответствующий размер изображения к тому, что затем рассчитывает отношение исходного измерения в новое измерение, затем применяется, что отношение к противоположному измерению.
Например. Скажи оригинальное фото было 100x100. Если ваш экран 200x100; Затем он растягивает первое измерение (200 больше 100), чтобы соответствовать. Это соотношение 2: 1, поэтому он делает то же самое напряженное к другому измерению. Полученное изображение на самом деле 200x200.
Добавьте накосремя большего количества кода для того, чтобы все было сосредоточено (поэтому вне экрана измерения арендодателя равны) и Voila.
В моем примере изображение будет перемещено на сумму 50, так что вы видите середину 100 (размер экрана) изображения, который был растянут до 200.
Изображение на самом деле является тегом DIV с фоном Свойство изображения набор.
Не уверены, какая библиотека, которую они используют, но в своем источнике JavaScript я сделал поиск «изменений» и нашел:
Event.observe(window,"resize",t61.background.sync_size);
, который выглядит так, как будто они присоединяют обработчик событий к окну. onresize.