旋转图像后空白太多答案

【问题标题】：Too much white space after rotate image旋转图像后空白太多
【发布时间】：2019-09-25 02:52:08
【问题描述】：

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

代码：

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

【问题讨论】：

哪个空白？无论您如何旋转图像，图像都将始终是正方形/矩形。
那么如何删除这个不必要的空间呢？剑的高度应该是 70px

标签： css photo

【解决方案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>

【讨论】：

是否可以用图片填充图片并给它作为背景？
@Ania 你可以给.img-box 一个背景图片

【解决方案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 来相应地编辑照片

【讨论】：