Сделайте квадратный элемент с ленивыми изображениями внутри ⇐ CSS

[Anonymous]

Я пытаюсь сделать чистую галерею изображений CSS для статического сайта. Я хочу создать квадратные элементы с предварительным просмотром изображений с центрированным нагруженным изображением. < /p>

Моя разметка работает нормально, когда устанавливаются пропорциональная ширина и фиксированная высота, но я не могу найти способ достичь фиксированного соотношения сторон для контейнера изображения. < /p>

Я пробовал: < /p>


[*] повторно переворачивает все в мега. Он ломает загрузку ленивого изображения - кажется, в какой -то момент каждое изображение появляется в виде просмотра, что приводит к загрузке. Создание предварительных просмотров на стороне сервера не является для меня вариантом. < /Li>

Код: Выделить всё

padding-bottom

трюк. Он полностью нарушает поведение объекта: Cover; и предварительное просмотр изображений.
[*]

Код: Выделить всё

vw

вроде как работает, но мой контейнер уже находится в гибком контейнере, и я не могу рассчитать его точно.

Код: Выделить всё

calc

. Как и ожидалось, это не работает с динамическими значениями, но я попробовал это на всякий случай < /li>
< /ol>

- это то, где способ получить высоту, чтобы зависеть от ширины с использованием чистого CSS? Class = "Snippet-Code">

Код: Выделить всё

div.image_list {
display: block;
width: 300px;  /* for example, not set in real case */
}

.image_wrapper {
float: left;
width: 30%;
height: 100px;  /* FIXME: make height always equal to width */
padding: 2%;
background: blue;  /* for example only */
}

img {
object-fit: cover;
max-width: 100%;
width: 100%;
height: 100%;
}< /code>


[img]https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg[/img]

[img]https://images.opencollective.com/jsbin/fef9bb5/logo/256.png[/img]

[img]http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2[/img]

[img]http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2[/img]

[img]https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg[/img]

[img]https://images.opencollective.com/jsbin/fef9bb5/logo/256.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/614 ... ges-inside