如何将旋转的图像保留在其父 div 中

Question

我有一个图像，它位于一些嵌套的div容器中，可以由用户旋转。但是，旋转会导致图像超过容器的高度。我想要的是让生成的父div 扩展其高度以适应图像旋转(以及"之后"文本适当地定位自己，就好像图像没有旋转一样(。

#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>