Миниатюры изображений на чистом CSS

Я хочу отображать коллекцию эскизов изображений в сетке. изображения могут быть разных размеров, но я бы хотел ограничить миниатюры определенным размером (скажем, 200 пикселей в ширину и 150 пикселей в высоту).

What I ' Я бы хотел найти волшебную разметку HTML и правила CSS, которые

1. позволят включать изображения в обычные элементы
2. Убедитесь, что миниатюры помещаются в их поле размером 200x150 пикселей, сохраните их пропорции и центрируются в зависимости от того, какое измерение они переполняют.
3. Не требуется JavaScript или конкретные знания фактических размеров каждого изображения

Я не уверен, возможно ли это. Я могу (плохо) приблизиться к тому, что хочу, с помощью следующей разметки:

<div class="thumb">
    <img src="360x450.jpeg">
</div>

и CSS:

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

Эта попытка прерывается разными способами:

1. Изображения в портретной ориентации будут иметь правильный размер, но будет перетекать через дно контейнера, что приведет к обрезке не по центру по вертикали.

   Спасибо за любую помощь или указатели, которые вы можете предоставить!

   Изменить: Я полагаю, я должен отметить, что идеальное решение будет работать в IE 6+ и современных браузерах, но любое решение, которое работает в IE 9+ и другие современные браузеры (последние версии WebKit, Gecko и т. д.) будут с радостью приняты.