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..
