html page
<div class="card pos-card col-6">
<div class="card-body">
<!--Import All Product-->
<div>
<div
class="row"
id="allProduct"
style="
position: relative;
overflow: scroll;
width: 620px;
height: 520px;
"
></div>
</div>
</div>
</div>
js file
const fetchItem = () => {
connection.query(
"SELECT * FROM `products`",
function (error, results, fields) {
if (error) throw error;
let item = results;
for (let i = 0; i < item.length; i++) {
let product =
'<div class="col-md-3 itemId" id="btn_add_item' +
`${item[i].pId}` +
'" tabindex="1" onclick="openQtyModal(' +
` ${item[i].pId}` +
')">';
product +=
' <div id="' +
`${item[i].pId}` +
'" class="card img-card productItem' +
i +
'" >';
product +=
'<img class="card-img-top img-fluid" src="./assets/images/product/' +
`${item[i].pImage}` +
'" width = "40px" height="40px" alt="Card image cap">';
product += '<div class="card-body">';
product +=
'<p class="card-text text-center">' + `${item[i].pName}` + "</p>";
product +=
' <p class="card-text text-center">' + `${format_currency}` + "</p>";
product += " </div>";
product += " </div>";
product += " </div>";
$("#allProduct").append(product);
}
}
);
};
Here I attached a picture . It has some items with pics it heights and widths are not same. just I want to set it as same sizes wth images and whole item square.. please help me to solve it. above I mentioned the code..
New contributor
programming Digital is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
You are obviously using Bootstrap which has this behavior built-in.
Take a look at the card layout section of the docs.
Below is an example of grid cards using .h-100 for equal height.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-2">
<div class="col">
<div class="card h-100">
<img src="https://dummyimage.com/200/000/fff.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://dummyimage.com/200/000/fff.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://dummyimage.com/200/000/fff.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://dummyimage.com/200/000/fff.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer longer longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
The images are having different heights & widths which is one of the reasons for the different size cards, please fix it. There can be two ways to fix it, one is that you have to provide the same class name to all image tags and then use it to give the same width & height to them. Second, you can give the cards a fixed height & width & for images use % unit so that the adjust according to the height & width of the card.