html - 我的图片库中某些图片的纵横比不正确

Question

我有一个包含许多图像的图库，但其中一些图像的纵横比不正确。一种是颠倒的——宽度为 4608 -3465 高度。其他人用 (w3024 - h4032) 向右或向左翻转。当然还有其他正确显示的(大多数是，我有大约 5 张图像的纵横比错误)

HTML:

<div id="imageContainer">
    <div class="imgBox">
      <img id="image_id_001" alt=" " src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt=" " src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
     <div class="imgBox">
      <img id="image_id_001" alt=" " src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt=" " src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
     <div class="imgBox">
      <img id="image_id_001" alt=" " src="Photos/_DSC0150.jpg">
      <p>Hotel</p>
     </div>
     <div class="imgBox">
      <img id="Fruit_Tree" alt=" " src="Photos/_DSC0226.jpg">
      <p>Fruit Tree</p>
     </div>
</div>

CSS:

#imageContainer img {
  width: 90%;
  height: 400px;
  box-sizing: border-box;
}

.imgBox{
  float: left;
  width: 33.33%;
}

我尝试使用 object-fit ，但它不起作用。尝试了 width:100% 和 height:100% ，仍然没有。

我没有使用 Bootstrap，也不想使用它。只是普通的 html 和 css，因为这些是元素的要求。有可能的解决方案吗？

Answer 1

为了保持比例尝试

img {
  width:90%;
  height:auto;
}