Faire l'image dans une balance de cellule flexbox ...

Question

Faire l'image dans une balance de cellule de flexbox dans leur récipient sans définir la taille?

Je construis une rangée en flexbox qui a une image comme élément supérieur et ensuite un conteneur div pour le texte ci-dessous. Trucs assez standard. La ligne se dirige vers un cms, et donc, voilà le problème.

Le client va être capable de changer l'image et en tant que tel, je n'ai aucune idée de la taille de l'image. Il n'est donc pas possible de définir des attributs de largeur ou de hauteur. En outre, la ligne est conçue pour s'adapter à n'importe quel écran, donc sur les écrans plus grands, je ne sais tout simplement pas quelle largeur doit avoir le conteneur. J'expérimente sur codepen, mais lorsque l'image est grande, elle semble forcer l'objet suivant sur une ligne. Je voudrais évidemment que l'image s'adapte à son meilleur ajustement du conteneur parent.

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

Vous voulez simplement définir la largeur à 100% comme vous le feriez dans la conception réactive normale et l'utilisation des propriétés de base de grossissement flex/flex.

Cet article devrait expliquer les nuances: https://css-tricks.com/flex-grow-is-weird/

et voici une ressource générale que j'utilise quand aux prises avec FlexBox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Cela ne vous dérange pas de changer légèrement le code html? Si vous allez transformer les images en arrière-plan, votre problème sera résolu très simplement. CodePen avec les styles Sass peuvent être trouvés here, la version CSS est ci-dessous. S'il vous plaît noter padding-top: 66% pour .thumbnail:before, il définit le rapport d'aspect de l'image (3: 2 dans ce cas), vous pouvez l'accorder au goût.

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