Адаптивные изображения в жидкости -таблица ширины (максимальная -ширина)

Рассмотрим следующий фрагмент кода:

HTML:

CSS:

div { max-width: 200px }
img { max-width: 100%  }​

Изображение никогда не будет шире 200 пикселей, независимо от его исходного размера. Все идет нормально.

Вот скрипка:http://jsfiddle.net/PeAAb/

Однако, если для родительского элемента displayустановлено значениеtable:

div { max-width: 200px; display: table }

изображение волшебным образом расширяется до исходной ширины, расширяя вместе с ней table.

Вот скрипка:http://jsfiddle.net/PeAAb/1/

То же самое происходит с реальной таблицей:http://jsfiddle.net/PeAAb/2/

Вопрос:Это ожидаемое поведение? Если да, то что можно сделать, чтобы обойти эту проблему?

Установка родительскогоwidth(даже процент -на основе ширины )вместо max-widthправильно сжимает изображение обратно в его поле, но не является решением. Мне нужно, чтобы родитель был гибким. (Я использую это для основной структуры сайта, чтобы HTML-код боковой панели отображался после основного содержимого в исходном коде, но с фиксированной шириной боковой панели.).

Кроме того, установка table-layoutнаfixedкажется, здесь не действует .