too long

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.