Make a square element with lazy images inside - css

Question

I'm trying to do a pure css image gallery for a static site. I want to create square elements with centered lazily loaded image previews in them.
My markup works fine when proportional width and fixed height are set, but I can't find a way to achieve fixed aspect ratio for image container.
I've tried:
Rewrite everything to flexboxes. It breaks lazy image loading - seems like at some point every image appears on the viewport causing it to load. Generating previews on server side is not an option for me.
padding-bottom trick. It totally breaks the behavior of object-fit: cover; and image preview centering.
vw kinda works, but my container is already in a flexible container and I can't calculate it accurately.
calc. As expected, it does not work with dynamic values, but I tried it just in case:)
Is where a way to get height to depend on width using pure css?
Here is the code snippet (same on 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>