How do I keep a rotated image within its parent div?

Question

I have an image which is situated inside some nested div containers which can be rotated by the user. However, the rotation results in the image exceeding the height of the containers. What I want is for the resulting parent divs to expand their height to accommodate the image rotation (and for the "After" text to position itself appropriately as if the image were without rotation).

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

Possible duplicate of [Rotated elements in CSS that affect their parent's height correctly](https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly) — Aaron3219, Apr 11 '19 at 20:10

score 0 · Answer 1 · edited Nov 18 '22 at 10:40

I have created custom css styles,check my code.

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

How do I keep a rotated image within its parent div?

1 Answers1