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

Question

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

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

Я пробовал:

1. Переписать все на flexboxes. Это нарушает отложенную загрузку изображений - кажется, что в какой-то момент каждое изображение появляется в области просмотра, вызывая его загрузку. Создание предварительного просмотра на стороне сервера не вариант для меня.
2. padding-bottom трюк. Это полностью нарушает поведение object-fit: cover; и центрирование предварительного просмотра изображения.
3. vw вроде работает, но мой контейнер уже находится в гибком контейнере, и я не могу его точно рассчитать.
4. calc. Как и ожидалось, он не работает со значениями Dynami c, но я попробовал это на всякий случай:)

Где найти способ получить высоту, чтобы зависеть от ширины, используя чистый css?

Вот фрагмент кода (то же самое для JsFiddle ):

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%;
}

<div class="image_list">
  <div class="image_wrapper">
    <img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
  </div>

</div>

Answer 1

Вы можете использовать js для этого. просто добавьте небольшой тег сценария в коде html.

//this is using jQuery
var cw = $('#Id of the image').width();
$('#Id of the image').css({'height':cw+'px'});
//for javaScript
var vw = document.getElementById('Id of the image');
var width = vw.width;
document.getElementById('Id og the image').style.height = width +'px';