旋转图像后空白太多

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>

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来相应地编辑照片