HTML img is not changing its size - php

Question

i have this HTML line here (its an echo from php)
echo "
<div class='rowItem'>
<div class='singleItem'>
<div class='itemImage' >
<img src= $arr3[$i] >
</div>
<div class='itemName'>$arr1[$i]</div>
<div class='itemPrice'><br> Php$arr2[$i]
<div class='orderButtonDiv'>
<a href='menu_burger.php'>ORDER</a>
</div>
</div>
</div>
</div>";
Here is the CSS I'm using
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
here picture of the result
as you can see i am not able to resize the image here is the css code. Aside from that it is also overlapping some text
here is the image without the picture without the image
How can i resize the image properly that it will follow the the height of single item and at the same time equate its width to its height
Thank you very much

Answer 1

In my experience, a div with
background:url([imagepath]);background-size:cover;
is the best solution, the css property:
object-fit: cover;
Can help if you want to preseve the img aproach, but is less backwards compatible.
As for the overlaping text, read the documentation for z-index css property.

Answer 2

You will need to apply the background-image as an inline style. You can then add background-size: cover; onto .singleItem in css to control the background image size.
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
background-size: cover;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
echo "
<div class='rowItem'>
<div class='singleItem' style='background-image: url(\"{$arr3[$i]}\");'>
<div class='itemName'> {$arr1[$i]}
</div>
<div class='itemPrice'><br> Php{$arr2[$i]}
<div class='orderButtonDiv'><a href='menu_burger.php'>ORDER</a></div>
</div>
</div>
</div>";