Чистые эскизы изображений CSS

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

То, что я хотел бы найти, - это волшебная HTML-разметка и правила CSS, которые будут

Разрешить включение изображений в обычные элементы <img>
Убедитесь, что миниатюры помещаются в их квадрат размером 200x150 пикселей, сохраняют их пропорции и центрируются в зависимости от того, какой размер они переполняют.
Не требуется 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;
}

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

Изображения, которые находятся в портретной ориентации, будут правильно отсортированы, но будут переполняться через нижнюю часть контейнера, что приведет к обрезке по вертикали и по центру.
Изображения, которые являются широкими и короткими, будут искажены в горизонтальном измерении из-за жестко закодированных правил width и min-height.
Но без этого жестко закодированного width изображения, размер которых больше минимальной высоты и ширины, не будут вообще изменены.

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

Я знаю, что могу решить эту проблему, вообще опуская элемент <img> и вместо этого вытягивая миниатюры в виде центрированного фонового изображения на содержащем элементе, но, если это возможно, я хотел бы сохранить <img> элементов на странице.

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

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

Ответ 1

Возможно, возможно.

Кроме того, возможно, не самая лучшая идея. Ваша главная проблема для преодоления здесь - это ориентация эскизов. Что, если вы имеете дело с панорамой? Конечно, сокращение его приведет к созданию очень неприглядного "скрюченного" изображения, а также очень высокого изображения. Это редкость, что все участвуют в 4X3 или 16X9 в 100% случаев. Итак, вам понадобится механизм для вычеркивания изображения. Даже если соотношение правильное, оно не будет изменяться так же качественно, как вы могли бы с помощью программы, такой как Photoshop или Gimp.

Другая серьезная проблема в этом процессе состоит в том, что вы отправляете огромное количество ненужных данных на сервер через большие изображения. Загрузка займет больше времени, излишне заполняет DOM, и в целом просто блокирует опыт пользовательского интерфейса.

Существует множество способов обойти это, но ни один из них не является чистым CSS. Я занимался этим несколько раз, каждый по-своему основан на клиенте. Для одного клиента, который хотел полностью настраивать, это был пользовательский загрузчик, изменяющий размер через iMagick (часть магии изображения) и пользовательский CSS/Javascript для альбома с большой интерактивностью. В другом случае я использую Gallery в качестве бэкэнд - обработку создания, выгрузки, титрования, обрезки и организации эскизов, а затем просто вытащил переформатированные ссылки изображения из БД, чтобы отобразить их более привлекательным образом. Вы могли бы сэкономить еще больше неприятностей и просто использовать что-то вроде Flickr api, чтобы вытаскивать изображения для вашего использования.

Здесь используется с помощью ImageMagick для создания миниатюр.

Ответ 2

Вы можете (вроде) добиться этого с помощью добавлений CSS3 background-size: contain и cover.

Live Demo

contain (верхнее изображение) подходит для всего изображения, сохраняя соотношение сторон. Ничего не обрезано.
cover (нижнее изображение) заполняет содержащий элемент вертикально или горизонтально (в зависимости от изображения) и обрезает остальное.

Ответ 3

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

Ну, я знаю, что для больших пальцев вы бы хотели, чтобы он был максимальным и минимальным, если вы хотите, чтобы меньшее изображение делало его большим и большим изображением, чтобы уменьшить его.

Ответ 4

попробуйте установить max-width и height, а не min, потому что если изображение не соответствует точному размеру, оно будет переполняться:)