html img 保持原大小,HTML img不会改变其大小

我在这里有此HTML行(它是php的回声)

echo "

$arr1[$i]

Php$arr2[$i]

ORDER

";

这是我正在使用的CSS

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

}

此处为结果图片

如您所见，我无法调整图像的大小，这是CSS代码。除此之外，它还会重叠一些文本

这是没有图片的图片，没有图片

如何正确调整图像的大小，使其与单个项目的高度一致，同时使其宽度等于其高度

非常感谢