使图像在 flexbox 单元格中缩放...答案

【问题标题】：Make the image in a flexbox cell scale…使图像在 flexbox 单元格中缩放...
【发布时间】：2018-03-30 07:49:33
【问题描述】：

在容器内缩放 flexbox 单元格中的图像而不定义大小？

我正在 flexbox 中构建一行，其中有一个图像作为顶部元素，然后是一个 div 容器用于下面的文本。很标准的东西。该行指向一个 cms，因此，问题就在这里。

客户将能够更改图像，因此，我不知道图像会有多大。因此无法设置任何宽度或高度属性。此外，该行被设计为适合任何屏幕，所以在更大的屏幕上，我根本不知道容器需要多宽。

我正在对codepen 进行试验，但是当图像很大时，它似乎会迫使下一个对象向下一行。我显然希望图像缩放到最适合父容器。

HTML

<section class="cards">
 <article class="card">
  <a href="#">
   <figure class="thumbnail">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg" alt="">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
  <article class="card">
  <a href="#">
   <figure class="thumbnail">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg" alt="">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
  <article class="card">
  <a href="#">
   <figure class="thumbnail">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg" alt="">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
</section><!-- CLOSE SECTION -->

SASS

section.cards
  width: 90%
  margin: 50px auto
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  flex-direction: row

  article.card
    background: #ffffff
    margin-bottom: 2em
    flex: 0 1 calc(33% -1em)

    a
      color: #000000
      text-decoration: none

      &:hover
        box-shadow: 3px 3px 8px hsl(0, 0%, 70%)

      .thumbnail
        display: flex
        justify-content: center
        align-items: center

        img
          height: 100%
          width: 100%
          object-fit: contain

      .card-content
        padding: 1.4em

        h2
          margin-top: 0
          margin-bottom: .5em
          font-weight: normal

        p
          font-size: 95%

【问题讨论】：

标签： responsive-design sass flexbox

【解决方案1】：

您介意稍微更改一下您的 html 代码吗？如果您将图像转换为背景 - 您的问题将非常简单地解决。带有 Sass 样式的 CodePen 可以在here 找到，CSS 版本如下。请注意padding-top: 66% 为.thumbnail:before，它定义了图像的纵横比（在这种情况下为 3:2），您可以根据需要调整它。

section.cards {
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}
section.cards article.card {
  margin-right: 1em;
  margin-bottom: 2em;
  flex: 1 1 auto;
}
section.cards article.card:nth-child(3n) {
  margin-right: 0;
}
section.cards article.card a {
  display: block;
  color: #000000;
  text-decoration: none;
  flex: 1 1 auto;
}
section.cards article.card a:hover {
  box-shadow: 3px 3px 8px #b3b3b3;
}
section.cards article.card a .thumbnail {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
section.cards article.card a .thumbnail:before {
  content: "";
  display: block;
  padding-top: 66%;
}
section.cards article.card a .card-content {
  padding: 1.4em;
}
section.cards article.card a .card-content h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: normal;
}
section.cards article.card a .card-content p {
  font-size: 95%;
}

<section class="cards">
 <article class="card">
  <a href="#">
   <figure class="thumbnail" style="background-image: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg)">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
  <article class="card">
  <a href="#">
   <figure class="thumbnail" style="background-image: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg)">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
  <article class="card">
  <a href="#">
   <figure class="thumbnail" style="background-image: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/1047234/library-placehold.jpg)">
   </figure>
   <div class="card-content">
    <h2>Title</h2>
    <p>Placeholder text</p>
   </div><!-- CLOSE CARD CONTENT -->
  </a><!-- CLOSE LINK -->
 </article><!-- CLOSE ARTICLE -->
</section><!-- CLOSE SECTION -->

【讨论】：

【解决方案2】：

您只需像在正常响应式设计中一样将宽度设置为 100%，并使用 flex grow/flex 基础属性。

这篇文章应该解释细微差别： https://css-tricks.com/flex-grow-is-weird/

这是我在使用 flexbox 时使用的通用资源。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：