Ого, мне наконец-то удалось понять, что объясняется в этой статье .Контейнер теперь изменяет размеры с помощью flex-элементов внутри, изменяя размеры вместе с ним, сохраняя соотношение сторон.
В итоге уловка была в том, чтобы установить padding-top: 30% в элементах div, которые содержат изображения, которые действуют как 'высота ", а затем дает им position: relative.Это дало мне возможность дать ребенку (теперь оттесненному верхом) position: absolute и поставить его на место в позиции top:0; left:0.
Причина, по которой мне пришлось использовать padding-top вместо height потому, что высота вычисляется из родительского элемента, когда мы хотим получить высоту, которая рассчитывается по ширине элемента.И padding-top с использованием процентов рассчитывается на основе ширины элемента.
body {
background-color: #666;
display: flex;
justify-content: center;
}
.container {
background-color: white;
display: flex;
flex-wrap: wrap;
width: 90%;
}
.img-box {
box-sizing: border-box;
border: 2px solid cyan;
flex-basis: 50%;
padding-top: 30%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
object-position: 50% 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div class="container">
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ"
/>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>