Как сохранить повернутое изображение в родительском элементе div? - PullRequest
Новая
       16

Как сохранить повернутое изображение в родительском элементе div?

0 голосов
/ 11 апреля 2019

У меня есть изображение, которое находится внутри некоторых вложенных контейнеров 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://www.cpre.org.uk/media/k2/items/cache/72700a14a2a02b35fe25ed088f8895bc_M.jpg" />
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 11 апреля 2019

Я создал собственные стили 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>
...