Слишком много пустого пространства после поворота изображения

Question

У меня проблема.Как убрать пробел после поворота изображения?

Фото с проблемой

Код:

.img-box{
  position:relative;
  width: 100%;
  border: 4px solid #333;
}

.img-box img{
  transform: rotate(44deg);
  width: 70%;
}

<div class="img-box">
  <img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>

Answer 1

transform: rotate только поворачивает изображение визуально, оно все равно занимает то же место в HTML. Самый простой способ решить эту проблему - сделать изображение position: absolute; и расположить его так, как вам нужно.

.img-box{
  position:relative;
  width: 100%;
  border: 4px solid #333;
  position: relative;
  height: 40px;
}

.img-box img{
  transform: rotate(44deg) translateY(-50%);
  width: 70%;
  position: absolute;
  top: -40px;
}

<div class="img-box">
  <img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>

Answer 2

Вы можете сделать что-то вроде этого:

.img-box{
  position:relative;
  width: 100%;
  border: 4px solid #333;
  height: 100px;
  overflow: hidden;
}

.img-box img{
  transform: rotate(44deg);
  width: 70%;
  position: absolute;
  top: -225px;
  left: 100px;
}

<div class="img-box">
  <img src="https://publicdomainvectors.org/photos/mystica-LightSaber-Fantasy-2.png" >
</div>

скрытое переполнение предотвратит утечку изображения за пределы контейнера.Однако лучшим решением было бы использовать программу графического редактирования, такую ​​как photoshop или gimp , чтобы редактировать фотографию соответственно