移除变形后的空间答案

【问题标题】：Remove space that has come after transforming移除变形后的空间
【发布时间】：2020-01-10 10:46:42
【问题描述】：

我想生成布局的 pdf。 div 会有一个固定的大小，例如。 div 720px 的宽度，我想在所有设备上保持 720。由于 div 会在移动设备上超出屏幕，因此我曾经使用 transform(scale) 使其尺寸变小，但 div 下方有空间。我想删除那个空间。以下是供您参考的代码。

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scale(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}

<div class="parent">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

【问题讨论】：

变换只是视觉效果，不影响布局
我发布了一个代码作为答案，看看这是否是您正在寻找的。如果它解决了您的问题，请检查并投票。
@sina_rosemann 无需添加此类评论，发布答案时会通知 OP
@TemaniAfif 谢谢，很高兴知道！

标签： html css reactjs pdf react-to-pdf

【解决方案1】：

我不能 100% 确定这是否是您所要求的，但如果您使用 ScaleX 而不是下面的空间，因为您只在 X 轴上缩放。

试试下面的代码：

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scaleX(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}

        <div class="parent">
            <div class="Scale">
              <div class="red"></div>
              <div class="blue"></div>
            </div>
          </div>

【讨论】：

【解决方案2】：

您会看到“div 下方的空格”，因为您的 <div class="parent"> 未按比例缩小，因此其 1px border 将保持在同一位置。同时，您缩小了<div class="Scale">，现在它比父级小，其边框可见。

要“删除”缩放后的 div 下方的空白，您还应该通过向其添加类 .Scale 来缩小父级，如下所示：

<div class="parent Scale">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

同样为了更简洁的代码，将 .Scaled 类组合在你的 css 中。

.Scale {
  background-color: #dddddd;
  transform: scale(0.5);
  transform-origin: top left;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.parent{
  border: 1px solid;
}

希望对你有帮助！

【讨论】：

【解决方案3】：

这很简单你必须用高度来计算，如果由于某种原因你把它颠倒了！像这里你当前的 width: 500px; 和 height: 220px; 你想像 width: 220px;高度：500px； 然后你必须再次使用 margin-bottom: calc((0.6 - 1) * 500px); 就是这样。

#parent {
  display: inline-block;
  outline: 5px solid #337326;
}

#child {
  width: 500px;
  height: 220px;
  background: #555; 
  transform: scale(0.6);
  transform-origin: top center;
  margin-bottom: calc((0.6 - 1) * 220px);
}

<div id="parent">
  <div id="child"> </div>
</div>

【讨论】：