如何在 flexbox 中创建裁剪后的可伸缩图像容器？答案

【问题标题】：How to create cropped scalable image containers in a flexbox?如何在 flexbox 中创建裁剪后的可伸缩图像容器？
【发布时间】：2018-05-21 03:18:33
【问题描述】：

我正在尝试在我的网站上使用 3 列 flex-box 布局，顶部有 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

选项 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
}

【讨论】：