CODEWITHSUNDEEP
responsive-designsassflexbox
Grant Smith
Grant Smith

Reputation: 351

Make the image in a flexbox cell scale…

Make the image in a flexbox cell scale within their container without defining size?

I am building a row in flexbox which has an image as the top element and then a div container for the text below. Pretty standard stuff. The row is heading for a cms, and hence, here lies the problem.

The client is going to be able to change the image and as such, I have no idea how big the image is going to be. So setting any width or height attributes is not possible. Also, the row is being designed to fit on any screen, so on bigger screens, I simply do not know how wide the container needs to be.

I'm experimenting on codepen, but when the image is large it seems to force the next object down a line. I would obviously like the image to scale to its best fit of the parent container.

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%

Upvotes: 0

Views: 795

Answers (2)

Flying
Flying

Reputation: 4570

Do you mind to change your html code slightly? If you will turn images in backgrounds - your problem will be solved quite simply. CodePen with Sass styles can be found here, CSS version is below. Please notice padding-top: 66% for .thumbnail:before, it defines image's aspect ratio (3:2 in this case), you can tune it to taste.

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

Upvotes: 0

robneal
robneal

Reputation: 40

You simply want to set the width to 100% like you would in normal responsive design and the use the flex grow/flex basis properties.

This article should explain the nuances: https://css-tricks.com/flex-grow-is-weird/

and here is a general resource I use when struggling with flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions