將圖像製作在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 -->