将图像制作在flexbox细胞比例尺中...

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

这篇文章应该解释的细微差别： 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版本在下面。请注意0​​为.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 -->