时间戳

首页 > 解决方案 > 移除变形后的空间

html - 移除变形后的空间

问题描述

我想生成布局的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>

标签： htmlcssreactjspdfreact-to-pdf

解决方案

很简单，你必须用高度来计算，如果由于某种原因你把它倒过来！像这里你当前的宽度：500px；和高度：220px；你想像宽度一样反转它：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>

推荐阅读