Как TheSixyOne.com пропорционально растягивает изображение на всю страницу?

Question

Я люблю новый http://thesixtyone.com дизайн. Мне интересно, как они пропорционально растягивают изображение, чтобы соответствовать всему фону? Они используют CSS / Javascript или другие хитрости?

Answer 1

Используются как CSS, так и Javascript.
Он принимает большее из высоты или ширины, устанавливает соответствующий размер изображения, затем вычисляет отношение исходного размера к новому измерению, а затем применяет это отношение к противоположному измерению.

Например. Скажем, оригинальное фото было 100х100. Если ваш экран 200х100; затем растягивается первое измерение (200 больше 100), чтобы соответствовать. Это соотношение 2: 1, поэтому оно соответствует тому же измерению. Полученное изображение фактически 200х200.

Добавьте немного кода, чтобы держать все это в центре (так, чтобы части экрана арендодателя были одинаковыми) и вуаля.

В моем примере изображение будет перемещено на 50, так что вы увидите середину 100 (размер экрана) изображения, которое было растянуто до 200.

Изображение на самом деле является тегом DIV с установленным свойством фонового изображения.

Answer 2

Не уверен, какую библиотеку они используют, но в их источнике javascript я выполнил поиск "resize" и нашел:

Event.observe(window,"resize",t61.background.sync_size);

Похоже, они подключают обработчик событий к window.onresize.