How to keep images for same height and width inside bootstrap 4.4.1 cards?

prohor · May 21, 2021, 2:26pm

I am trying to use bootstrap cards with images inside. I need to keep all the cards to be in same size (same width and height). Images should also be the same height and width as well. I have tried several solutions found on net but not work in my case including “width” and “height” attribute in tag. Any solution would be a great help! Here is my code for cards

    <div class="col mt-4">

                    <div class="card">
                     
                        <a href="product-details.php?pid=<?php echo htmlentities($row['id']);?>">
                            <img  src="admin/productimages/<?php echo htmlentities($row['id']);?>/<?php echo htmlentities($row['productImage1']);?>" data-echo="admin/productimages/<?php echo htmlentities($row['id']);?>/<?php echo htmlentities($row['productImage1']);?>"   alt="" width="340" height="440"></a>
                    </div>
                </div>

ErnieAlex · May 21, 2021, 3:20pm

Just use CSS and set either an ID or CLASS and use that to set the size of the image.
<img style=“width: 30px; height: 30px;” …>

prohor · May 21, 2021, 3:52pm

Thank you for the solution. Inline css worked. I found another problem with my code, no px as
width=“340” height=“440”

ErnieAlex · May 21, 2021, 4:42pm

Well, you do not want to use inline HTML to set widths. It is better to use the newer CSS.
And, yes, px is for pixels, but, there are many others you can use, such as em’s, inches, etc…

Always nice to solve a programming problem! See you in your next post!