Question

我在这里有此HTML行（它是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>";

这是我正在使用的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代码。除此之外，它还会重叠一些文本

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

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

非常感谢

Answer 1

以我的经验，

是一个div

  background:url([imagepath]);background-size:cover;

css属性是最好的解决方案：

object-fit: cover;

如果您希望保留img方式，可以提供帮助，但向后兼容性较差。至于重叠的文本，请阅读有关z-index css属性的文档。

Answer 2

您将需要将背景图像用作嵌入式样式。然后，您可以添加background-size：cover;放到CSS中的.singleItem上，以控制背景图片的大小。

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

HTML img不会改变其大小

2 个答案: