Там використаний стандартний прийом з display: block; і max-width: 100% для зображень:
Якщо збільшувати / зменшувати ширину контейнера, то зображення зменшує / збільшує свою ширину і одночасно пропорційно зменшує / збільшує свою висоту. Це дуже крута особливість зображень, багато де виручає.
Як зробити так, щоб при збільшенні / зменшенні висоти контейнера, зображення вело себе подібно до першого випадку: висота зображення ставала дорівнює висоті контейнера і ширина зображення теж пропорційно зменшувалася / збільшувалася? Як це зробити без яваскрипт? (Як зробити з яваскрипт я знаю.) Можна використовувати самі новомодні CSS3 штуки.
заданий 5 Серпня '13 о 19:11
Загалом, як виявилося, достатньо всього одного правила і блоковий контейнер навколо, щоб зображення Скейл і по висоті - max-height: 100%:
Ось готовенький фіддл. (Природно, ресайз потрібно жсфіддловскій фрейм (ака контейнер)).
Досвідченим шляхом було з'ясовано, що такий ресазй можливий тільки всередині блочних елементів (наприклад, body). В елементах з display: table і display: table-cell зображення ресайз тільки в ширину, а з display: flex НЕ ресайз взагалі ніяк.
Доведеться пропорційно ресайз Яваскрипт.
Якщо я правильно зрозумів, то вам треба змінювати розмір зображення при зміні розмірів вікна браузера по висоті.
В цьому випадку, засобами CSS це не вийде зробити так само, як і з шириною, з тієї причини, що висота як би не має меж, а значить немає можливості встановити висоту щодо вікна браузера в процентному співвідношенні.
У даній ситуації я поки бачу тільки один вихід - це медіа-запити (@media). Плавної зміни зображення тут чекати не доводиться, хоча деяку імітацію, все ж зробити можна:
У прикладі, змінюйте фрейм.
відповідь дан 5 Серпня '13 о 23:48