html - 如何在其父 div 中保留旋转图像？

Question

我有一个图像位于一些嵌套的 div 容器内，用户可以旋转这些容器。但是，旋转会导致图像超出容器的高度。我想要的是生成的父 div 扩展它们的高度以适应图像旋转(并且“After”文本适本地定位自己，就好像图像没有旋转一样)。

#image-block {
  padding: 15px;
  display: flex;
  min-height: 300px;
  background-color: #e0e0e0;
  /* light gray color */
}

#image-description {
  padding-right: 5px;
  word-break: break-word;
  flex-direction: column;
  align-self: center;
  background-color: #a0a0a0;
  /* dark gray color */
}

#image {
  flex-direction: column;
  align-self: center;
  display: block;
  background-color: #ffffe0/* light yellow color */
}

#image img {
  margin-top: 0% !important;
  max-width: 150px;
  max-height: 150px;
  vertical-align: middle;
}

#img2 {
  transform: rotate(90deg);
  /* these two lines are added to rotate the image */
  transform-origin: center center;
}

<div id="images-container">
  <div id="image-block">
    Image block
    <div id="image">
      Image wrapper itself
      <h5>After</h5>
      <img id="img2" src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

Answer 1

我已经创建了自定义 css 样式，请检查我的代码。

#wrapper {
  display: flex;
  border:1px solid red;
  width:auto;
  height:200px;
  margin-top:100px;
  background-color: bisque;
}
.item {
  flex-grow: 1;
}
.item > img {
  margin:30px auto;  
  transform: rotate(90deg);
  display:block;
  max-width: 150px;
  max-height: 150px;
  vertical-align: top;
}

<div id="wrapper">
  <div class="item"><img src="https://via.placeholder.com/150"></div>
  <div class="item"><img src="https://via.placeholder.com/150"></div>
  <div class="item"><img src="https://via.placeholder.com/150"></div>
  <div class="item"><img src="https://via.placeholder.com/150"></div>
  
</div>