html - 如何放置像以前一样旋转 90 度以适合 div 容器的图像和其他图像？

Question

我有一个图片库，里面有很多图片，但其中一些需要旋转，因为上传时它们向左旋转。

最初我设置了 div 容器的 CSS，其中每个图像都在具有相同类的单独 div 中。但是一旦我用额外的 CSS 旋转它们并附加到 DOM if image rotation is "some value"-> 旋转 90 度(使用 transform css 属性)。

现在，当窗口调整大小时，那些图像会超出 div 容器，而其他图像会调整大小以适合容器。这可能是因为当图像旋转时 width 变为 height 而 height 变为 width .我知道我还没有进行 @media 查询 ，但我现在想实现图像以适应它们的容器。什么是最好的方法和解决方案？

#imageContainer {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5%;
}

.imgBox {
  float: left;
  width: 31.33%;
  border-style: groove;
  border-color: dimgrey;
}

#imageContainer img {
  width: 90%;
  height: 500px;
  box-sizing: border-box;
  object-fit: inherit;
  margin-left: 5%;
  margin-top: 10%;
  align-content: inherit;
}

#imageContainer p {
  color: black;
  font-size: 25px;
  text-align: center;
  font-family: "Arial Black";
}

.rotate90 {
  transform: rotate(90deg);
}

<div id="imageContainer">
  <div class="imgBox">
    <img id="image_id_002" alt=" " src="....." class="rotate90">
    <p>Image Title</p>
  </div>
  <div class="imgBox">
    <img id="image_id_002" alt=" " src="......">
    <p>Upside-down look</p>
  </div>
  <div class="imgBox">
    <img id="image_id_002" alt=" " src="......" class="rotate90">
    <p>Image Title</p>
  </div>
  <div class="imgBox">
    <img id="image_id_002" alt=" " src="...... ">
    <p>Image Title</p>
  </div>
  </div

Answer 1

我建议使用方形容器，这样内部可以任意旋转。 也许，溢出:隐藏，裁剪图像以获得更好的 View 。