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

Question

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     lt h1 class  display-4 text-xs-center m-y-3 text-muted  id  speakers  gt Ice Cream lt  h1 gt    lt div class  row  gt     lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img brownie jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt Brownie Delight lt  h4 gt            lt p class  card-text  gt Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img butterPecan jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt Butter Pecan lt  h4 gt            lt p class  card-text  gt Roasted pecans  butter and vanilla come together to make this wonderful ice cream lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img bCherry jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt Black Cherry lt  h4 gt            lt p class  card-text  gt Our classic vanilla loaded with plump black cherries to give flavor and color lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img mintChip jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt Mint Chip lt  h4 gt            lt p class  card-text  gt Our signiture mint ice cream jam packed with mint chocolate chips lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img pistachio jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt Pistachio lt  h4 gt            lt p class  card-text  gt Our classic pistachio is loaded with nuts to give it that great flavor  and of course comes in your favorite color lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  col-md-6 col-lg-4  gt       lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img IceCream jpg    gt         lt div class  card-block  gt           lt h4 class  card-title  gt More Flavors lt  h4 gt            lt p class  card-text  gt We couldn not fit all of our wonderful flavors on one page  click here to see more  lt  p gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    Here is an image of what I am getting and this is what I want to get where they are all the same size

User · Answer

card-img-top       height  15rem      object-fit  cover

User · Answer

I solved this problem using Bootstrap 4 Emdeds Utilities  https   getbootstrap com docs 4 3 utilities embed  In this case you just need to add you image to a div embbed-responsive like this    lt div class  card  gt     lt div class  embed-responsive embed-responsive-16by9  gt        lt img alt  Card image cap  class  card-img-top embed-responsive-item  src  img butterPecan jpg    gt     lt  div gt     lt div class  card-block  gt       lt h4 class  card-title  gt Butter Pecan lt  h4 gt       lt p class  card-text  gt Roasted pecans  butter and vanilla come together to make this wonderful ice cream lt  p gt     lt  div gt   lt  div gt    All images will fit the ratio specified by modifier classes     embed-responsive-21by9   embed-responsive-16by9   embed-responsive-4by3  embed-responsive-1by1   Aditionally this css enables zoom instead of image stretching   embed-responsive  card-img-top       object-fit  cover

User · Answer

it is a known issue  I think the workaround should be set it as    card-img-top       width  100

User · Answer

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

User · Answer

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

User · Answer

you can fix this problem with style like this    lt div class  card  gt  lt img alt  Card image cap  class  card-img-top img-fluid  src  img butterPecan jpg  style  width  18rem  height  20rem     gt

User · Answer

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

User · Answer

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   lt div class  container-fluid  gt       lt div class  row row-cols-2 row-cols-md-4  gt           lt div class  col mb-4  gt               lt div class  card h-100  gt                   lt img src  https   i0 wp com www impact-media be wp-content uploads 2019 09 placeholder-1-e1533569576673-960x960 png  class  card-img-top  gt                   lt div class  card-body  gt                       lt p class  card-text  gt Test lt  p gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col mb-4  gt               lt div class  card h-100  gt                   lt img src  http   www nebero com wp-content uploads 2014 05 placeholder jpg  class  card-img-top  gt                   lt div class  card-body  gt                       lt p class  card-text  gt Test lt  p gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col mb-4  gt               lt div class  card h-100  gt                   lt img src  http   www nebero com wp-content uploads 2014 05 placeholder jpg  class  card-img-top  gt                   lt div class  card-body  gt                       lt p class  card-text  gt Test lt  p gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  col mb-4  gt               lt div class  card h-100  gt                   lt img src  https   i0 wp com www impact-media be wp-content uploads 2019 09 placeholder-1-e1533569576673-960x960 png  class  card-img-top  gt                   lt div class  card-body  gt                       lt p class  card-text  gt Test lt  p gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS   card-img-top       flex-grow  1      object-fit contain     card-body      flex-grow 0

User · Answer

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

User · Answer

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

User · Answer

card-img-top   width  100   height  30vh  object-fit  contain     Contain will help in getting Complete Image displayed inside Card  Adjust height  quot 30vh quot  according to your need

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to image

Examples related to twitter-bootstrap