css - 旋转图像后有太多空白

Question

我有一个问题。旋转图像后如何去除空白？

Photo with problem

代码:

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