我将一些图像分成两行，宽度随着浏览器窗口大小的调整而随着容器的增大和缩小。
但是，图像可以是任何宽高比，我必须将它们限制为 80 宽:53 高比。我已经尝试了将近一天的各种事情，但都无济于事。我应该如何实现这一目标？
body {
background-color: #666;
display: flex;
justify-content: center;
}
.container {
background-color: white;
display: flex;
flex-wrap: wrap;
width: 90%;
}
.img-box {
flex-basis: 50%;
}
img {
display: block;
width: 100%;
}<!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>代码框:https://codesandbox.io/s/8x3qjompz9
理想的结果:
最佳答案
哇，我终于理解了所解释的内容in this article . 容器现在随内部的 flex 元素一起调整大小，同时保持纵横比。
最后的技巧是在包含图像的 div 上设置一个 padding-top: 30% 作为“高度”，然后给它们 position: relative。这使我能够给 child (现在被 padding-top 向下推)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>关于html - 在 flexbox 中保持包含图像的 div 的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55307549/