问题是，图像在调整大小时必须作为一个整体进行拉伸(stretch)以适应窗口。
大多数图片都可以正常工作，但最后一张图片的宽度不同，它只是调整到一个巨大的尺寸。
它必须是绝对位置，因为下面有一个网络 Canvas 。
我想我尝试了所有方法，所有 flex-grow、flex-basis 的东西。我不明白。
正如您在示例中看到的，最后一张图片应该与其他图片在高度上适合，但我无法让它适合。
.container img {
width: 100%;
}
.container {
width: 40%;
background: #777;
}
.container2 {
width: 12.5%;
background: #777;
}
.myflex {
display: flex;
position: absolute;
}<div class="myflex">
<div class="container">
<img src="https://placehold.it/512x512/000088/ffffff" />
</div>
<div class="container">
<img src="https://placehold.it/512x512/000088/ffffff" />
</div>
<div class="container">
<img src="https://placehold.it/512x512/000088/ffffff" />
</div>
<div class="container2">
<img style="" src="https://placehold.it/64x512/000088/ffffff" />
</div>
</div>最佳答案
在一行中使用这个 flexbox
<!DOCTYPE html>
<html>
<head>
<style> body{margin:0;}
.flex-container {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-align-items: stretch;
align-items: stretch;
}
.flex-item:nth-of-type(1) { flex-grow: 1; }
.flex-item:nth-of-type(2) { flex-grow: 1; }
.flex-item:nth-of-type(3) { flex-grow: 2; }
.flex-item4:nth-of-type(4) { flex-grow: 1; }
.flex-item {
background-color: cornflowerblue;
width: 40%;
}
.flex-item 4{
background-color: cornflowerblue;
width: 10%;
margin: 10px;
}
.flex-item img{
width: 100%; height: 100%;
}.flex-item4 img{
width: 100%; height: 100%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>
<div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>
<div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>
<div class="flex-item4"> <img style="" src="https://placehold.it/64x512/000088/ffffff" /></div>
</div>
</body>
</html>
关于html - 如何使 flexbox 元素适合它们的图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43758123/