Как сделать адаптивные изображения

[barrel]

Всем привет!

 

Структура такая:

 

<div class="tovar">

   <div class="kartinka"> <img ... > <div>

<div>

 

Высота дивов фиксированная. Ширина меняется под ширину браузера. Сама картинка (img) и высоту и ширину меняет пропорционально при изменении ширины браузера, но не должна вылазить за пределы своего дива <div class="kartinka">

 

Все картинки разного размера, квадратные, прямоугольные, большие, маленькие, вертикальные, горизонтальные.

Надо чтобы весь этот сброд

1. автоматом втиснулся каждый в свой див,
2. выровнялся по горизонтали
3. и в дальнейшем масштабировался.

 

Какие стили нужно задать?

 

Сам пробовал. Делал обертку для <img> с помощью <p>, чтобы один стиль ширину ровнял, другой высоту. Никак не могу нащупать универсальные стили. В FF вообще картинка вылазит за пределы дива, как будто браузер не понимает max-width:100% или display:table-cell ему не нравится.

[Veseloff]

Давайте ссылку на страницу.

[barrel]

Страницы нет. В прошлые выходные шаблон пытался сделать, ничего не получилось. 

[Veseloff]

Страницы нет.

Самое время создать. Хотя бы на jsfiddle выложите попытки. 

[rus]

img { width: 100%; }

По идее это должно работать.