Make a card that fits all content

Question

I want to make 8 cards on a mobile version of my news site (school project). I wish for the cards to all have the same proportion, but, the images I have saved on my computer for the cards differ some in sizes (some of them are taller).

Is there a way to make the images, headline and text all fit in the cards, without me having to resize every image before adding it to the project?

I wish for all cards to look like this

How the cards look like when the image size differ

Code:

img {
  max-width: 100%;
  max-height: 100%;
  display: block;  
}

.cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px;
}


.card{
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin: 20px;
  margin-bottom: 5px;
  height: 280px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

score 0 · Accepted Answer · answered Aug 25 '20 at 16:18

0

Just give your image a height value that is the tallest you ever want the picture to be. You’ll have to set the width to auto to avoid stretching the picture.

img {
    height: 300px; /* play around with this number until you get the height you need */
    width: auto;
    max-width: 100%;
}

answered Aug 25 '20 at 16:18

Dan Mullin

4,285
2
18
34

1

in this way the height will be uniform, but if the ratio of the images is not the same some gaps will appear on the side. – alula Aug 25 '20 at 16:32

alula · Answer 2 · 2020-08-25T16:36:43.493

Usually I put the image as background and place it centered. You can also put together all background attributes, but if you work with php I recommend to put in the style tag just the background-image and as class property all the rest.

Explanation of css:

overflow: hidden; -> this hides the extra boundaries of the image

background-size: cover; -> this makes the image stretch/resize as much as possible in relation with the container size (infact I used an image 600x800) Syntax

background-position: center center; -> if you trim the image usually it's safer to trim it uniformely along all sides, but it's up to you. Syntax

BONUS: just to be sure to avoid small images to repeat like a pattern you can also add: background-repeat: no-repeat; If you set background-size: cover you don't need this.

/* where the magic happens */
.img-as-bg {
  height: 300px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
}


/* extra style copied from your source */
.cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px;
}


.card{
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin: 20px;
  margin-bottom: 5px;
  height: 280px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div class="cards">
  <div class="card" style="width: 18rem;">
    <div class="img-as-bg" style="background-image: url('https://via.placeholder.com/600x800/0055ff');"></div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#">Read more</a>
    </div>
  </div>

  <div class="card" style="width: 18rem;">
    <div class="img-as-bg" style="background-image: url('https://via.placeholder.com/500x900/00ffff');"></div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#">Read more</a>
    </div>
  </div>
</div>

Make a card that fits all content

2 Answers2