CSS-изображение в стиле Polaroid с неизвестными размерами

Question

Я хочу создать изображение в стиле поляроида с помощью CSS.Тем не менее, я хотел бы выровнять изображение, создав большой эскиз, чтобы все изображения были одинакового размера.Я не знаю размеров изображения заранее, и они, вероятно, разные.Я думал об использовании тега рисунка вместе с figcaption, чтобы подписать фотографию.Как создать миниатюру, когда размеры изображения неизвестны.Я посмотрел на Создание миниатюр с использованием свойства переполнения и Создание миниатюр с помощью свойства клипа CSS , но ни один из них не учитывал неизвестные измерения.

Answer 1

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

Затем, просто используя padding и контейнеры div, вы можете создать белый поляроидный эффект.

В этом примере позволяет изображению иметь полную ширину 100% и находить изображение с наименьшей высотой, а также применять эту высоту ко всем изображениям поляроида, чтобы все поляроиды имели одинаковую высоту. Если вы не очень беспокоитесь о том, чтобы они были одинакового роста. Тогда сделай это таким образом

Answer 2

С тегами figure и figcaption все довольно просто, и я смог воссоздать эффект без лишней разметки.

Действительно важный CSS:

figure{height:155px; width:125px; overflow:hidden;}

, а также применив position:relative; к figure и применив некоторое относительное расположение на figcaption, вы сможете получить аккуратный эффект поляроида.

Демо

Поскольку вы их предложили, я уверен, что вы знаете, как figure и figcaption поддерживаются во всех браузерах.

Answer 3

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

* ** 1003 тысяча два * Пример