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://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg" />
    </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://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg"></div>
  <div class="item"><img src="https://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg"></div>
  <div class="item"><img src="https://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg"></div>
  <div class="item"><img src="https://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg"></div>
  <div class="item"><img src="https://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg"></div>
  
</div>

如何将旋转图像保留在其父div内？

1 个答案: