Блог

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

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

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

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

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

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

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

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

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

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

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

Живая демонстрация

• contain (верхний рисунок) подходит ко всему изображению с сохранением соотношения сторон. Ничего не обрезано.

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

Возможно, вероятно.

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

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

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

Вот инструкция по использованию ImageMagick для создания эскизов.

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

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

попробуйте установить максимальную ширину и высоту, а не минимальную, потому что, если изображение не совсем такого размера, оно переполнится 🙂