我想在我的网站上使用 3 列 flexbox 布局，顶部有 3 个图像，然后是 3 个正文。我希望图像是一个固定宽高比的容器，如果图像对于容器来说太大，图像需要在高度方向上填充整个容器。
如果窗口缩小，图像应该缩小以保持与 flexbox 的纵横比，而现在它只是缩小宽度。
我的问题是，无论我研究过什么解决方案，我都找不到能够提供具有固定纵横比的裁剪图像的解决方案，并且还可以缩放以保持该比例。它总是要么让整个图像缩放，要么只缩放宽度，进一步裁剪图像。
有没有我可以使用的解决方案？
html {
height: 100%;
}
body {
text-wrap: normal;
text-align: center;
position: relative;
padding-bottom: 5.5em;
margin: 0;
min-height: 100%;
}
.homeinfo-flex {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
position: absolute;
transform: translateX(-50%);
left: 50%;
display: flex;
max-width: 67em;
justify-content: space-around;
background: #CCC;
}
.homeinfo-flex .col {
width: 30%;
margin: 0 1%;
text-align: left;
}
.homeinfo-flex .container {
text-align: center;
overflow: hidden;
padding-bottom: 2em;
}
.homeinfo-flex img {
position: relative;
left: 100%;
margin-left: -200%;
height: 15.62em;
max-width: 15.62em;
}<body>
<div class="homeinfo-flex">
<div class="col">
<div class="container"><img src="images/street_ph.jpg" alt="Street" /></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="col">
<div class="container"><img src="images/resturaunt_ph.jpg" alt="Street" /></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="col">
<div class="container"><img src="images/event_ph.jpg" alt="Street" /></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</body>最佳答案
选项 1:附加图像作为背景图像。 div class="container"style="background-image: url(images/resturaunt_ph.jpg);"
.container {
background-image: url()
background-size:cover;
padding-bottom: 80%; // 5:4 ratio
}
选项 2:用您的宽高比填充容器并将图像设置为 object-fit:cover。
.container {
position:relative;
padding-bottom: 80%; // 5:4 ratio
}
.container img {
position:absolute;
top:0;
left:0;
min-height: 100%;
min-width:100%;
object-fit: cover // check browser support
}
关于html - 如何在 flexbox 中创建裁剪后的可缩放图像容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47687903/