CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Renuz
Renuz

Reputation: 1667

How to get images in Bootstrap's card to be the same height/width?

So here is my code, it displays 6 cards, three across and two rows. I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work, I use "img-fluid" as a class and when I go to a mobile or smaller browser, they all have the same width, but the height is still off. 

<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
      <div class="card-block">
        <h4 class="card-title">Brownie Delight</h4>

        <p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
      <div class="card-block">
        <h4 class="card-title">Butter Pecan</h4>

        <p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
      <div class="card-block">
        <h4 class="card-title">Black Cherry</h4>

        <p class="card-text">Our classic vanilla loaded with plump black cherries to give flavor and color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
      <div class="card-block">
        <h4 class="card-title">Mint Chip</h4>

        <p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
      <div class="card-block">
        <h4 class="card-title">Pistachio</h4>

        <p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
      <div class="card-block">
        <h4 class="card-title">More Flavors</h4>

        <p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
      </div>
    </div>
  </div>
</div>

Here is an image of what I am getting and this is what I want to get where they are all the same size.

Upvotes: 132

Views: 305980

Answers (16)

Tony Horrocks
Tony Horrocks

Reputation: 105

    <div class="card h-100"> 
  <div class="card-img-top card-image-wrapper"> 
    <img src...../>
  </div>
  <div class="card-body d-flex flex-column">
    <h5 class="card-title">Title</h5>
    <p class="card-text flex-grow-1">Body text goes here</p> 
  </div>
</div>

CSS

.card-image-wrapper {
  height: 200px; /* Set this to whatever height you want your images to be */
  overflow: hidden;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This will crop the image to fill the space if needed */
}

Upvotes: 0

Brett Elliot
Brett Elliot

Reputation: 962

In case you don't want to override the css you can do this inline with style:

style="width: 100%; height: 15rem; object-fit:cover"

Obviously, you can adjust height to whatever.

Upvotes: 0

Andr&#233; Paulo
Andr&#233; Paulo

Reputation: 1

I solved with these:

<div class="card **border-0 p-0**">
    <img src="..." class="card-img-top" alt="...">
        <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="#" class="btn btn-primary">Go somewhere</a>
        </div>
</div>

Upvotes: 0

Stefan
Stefan

Reputation: 21

use 'mh-100' to set the max height of the image to 100% and nest it in a parent with a fixed height.

<div class="text-center" style="height: 10rem">
  <img src="https://..." class="img-fluid mh-100" >
</div>

Upvotes: 2

Pelerano
Pelerano

Reputation: 803

I solved this problem using Bootstrap 4 Embeds Utilities

https://getbootstrap.com/docs/4.3/utilities/embed

In this case you just need to add you image to a div.embed-responsive like this:

<div class="card">
  <div class="embed-responsive embed-responsive-16by9">
     <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
  </div>
  <div class="card-block">
    <h4 class="card-title">Butter Pecan</h4>
    <p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
  </div>
</div>

All images will fit the ratio specified by modifier classes:

  • .embed-responsive-21by9
  • .embed-responsive-16by9
  • .embed-responsive-4by3
  • .embed-responsive-1by1

Additionally this css enables zoom instead of image stretching

.embed-responsive .card-img-top {
    object-fit: cover;
}

Upvotes: 70

Luca C.
Luca C.

Reputation: 12594

I solved with these:

.card-img-top {
    max-height: 20vh; /*not want to take all vertical space*/
    object-fit: contain;/*show all image, autosized, no cut, in available space*/
}

Upvotes: 2

Ashutosh Tiwari
Ashutosh Tiwari

Reputation: 1597

.card-img-top {
width: 100%;
height: 30vh;
object-fit: contain;
}

Contain will help in getting Complete Image displayed inside Card.

Adjust height "30vh" according to your need!

Upvotes: 21

Plamen Nikolov
Plamen Nikolov

Reputation: 54

I found the below works for my setup using cards and grid system. I set the flex-grow property of card-image-top class to 1 and the object fit on the same to contain and the flex-grow property of the body to 0.

HTML

<div class="container-fluid">
    <div class="row row-cols-2 row-cols-md-4">
        <div class="col mb-4">
            <div class="card h-100">
                <img src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png" class="card-img-top">
                <div class="card-body">
                    <p class="card-text">Test</p>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100">
                <img src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg" class="card-img-top">
                <div class="card-body">
                    <p class="card-text">Test</p>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100">
                <img src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg" class="card-img-top">
                <div class="card-body">
                    <p class="card-text">Test</p>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100">
                <img src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png" class="card-img-top">
                <div class="card-body">
                    <p class="card-text">Test</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.card-img-top {
    flex-grow: 1;
    object-fit:contain;
}
.card-body{
    flex-grow:0;
}

Upvotes: 3

Olgu Dulger
Olgu Dulger

Reputation: 60

you can fix this problem with style like this.

<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" style="width: 18rem; height: 20rem;" />

Upvotes: 2

Dimitar Milushev
Dimitar Milushev

Reputation: 391

.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

As shown above but when you add height i suggest using "vh" (Viewport Height units) for a more mobile-friendly experience.

Upvotes: 29

Robert Andrews
Robert Andrews

Reputation: 1279

I went with "manually" using the same breakpoints in Bootstrap 4 as media queries...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

It works, though I wish there were more native responsiveness of this sort.

Partial suggestion from @sepuckett86 and I.

Upvotes: 6

Jeremy Lynch
Jeremy Lynch

Reputation: 7230

.card-img-top {
    height: 15rem;
    object-fit: cover;
}

Upvotes: 12

sepuckett86
sepuckett86

Reputation: 3197

Try this in your css:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

Adjust the height vw as you see fit. The object-fit: cover enables zoom instead of image stretching.

Upvotes: 314

maxisam
maxisam

Reputation: 22745

it is a known issue

I think the workaround should be set it as 

.card-img-top {
    width: 100%;
}

Upvotes: 5

Renuz
Renuz

Reputation: 1667

Each of the images need to be the exact dimensions before you put them up otherwise bootstrap 4 will try to place them in a funky shape. Bootstrap also has something like Masonry on their documents that you can use if need be, you can see that here, http://v4-alpha.getbootstrap.com/components/card/#columns.

Upvotes: 0

Michael Mano
Michael Mano

Reputation: 3440

I dont believe you can without cropping them, I mean you could make the divs the same height by using jquery however this will not make the images the same size.

You could take a look at using Masonry which will make this look decent.

http://masonry.desandro.com/

Upvotes: 2

Related Questions