Изображение пропорциональное изменение размера

Question

Вот fiddle.

Существует ЭТАЛОНОМ трюк с display:block; и max-width:100%; для чувствительных изображений:

img { 
    display: block; 
    max-width: 100%; 
} 

Если изменить размер ширина контейнера, мое изображение вписывается в эту ширину, а также автоматически изменяет свою собственную высоту. Это очень отличное поведение! Также он не использует Javascript.

Итак, можно ли сделать такой же трюк, изменив размер высоты контейнера? Я хочу, чтобы это изображение соответствовало высоте контейнера, а также автоматически пропорционально изменяло его собственную ширину. Конечно, без Javascript, просто CSS или каких-либо экспериментальных функций CSS3 (я знаю, как это сделать с Javascript, действительно).

Answer 1

Добавить

max-height: 100%; 

Кроме того, старайтесь не работать с таблицами - они ведут себя (больше) непредсказуемо, чем другие типы дисплеев.

См. here Самый простой пример.

EDIT: Не удалось найти способ сделать это без JS. Я применил два метода для вас в here - оба могут быть легко использованы (я использовал jQuery, но вам не обязательно). Если этого не достаточно, чем удачи.