Question

在不定义尺寸的情况下，在容器内以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%

Answer 1

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

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

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

Answer 2

你介意稍微更改你的HTML代码吗？如果您将在背景中转换图像 - 您的问题将很简单地解决。可以找到带有Sass样式的CodePen here，CSS版本如下。请注意padding-top: 66% .thumbnail:before，它定义了图片的宽高比（在这种情况下为3：2），您可以将其调整为品味。

＆＃13;

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%;
}

＆＃13;

<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 -->

＆＃13;

以Flexbox单元格缩放图像...

2 个答案: