使用CSS将像素转换为百分比

Question

我有一个矩形，宽度为125px，高度为48px。我正在努力使矩形 增加5％。如何以 5％增加矩形，同时知道像素的宽度和高度。

Answer 1

CSS的calc功能是你的朋友：

.rect {
    width: calc(125px * 105%);
    height: calc(48px * 105%);
}

Answer 2

另一种选择可能是使用 Transform - Scale

  

5％将是1.05

div {
  line-height:48px;
  background:yellow;
  border:thin dotted black;
  text-align:center;
  width:125px;
  height:48px;
}
.five {
  transform:scale(1.05);
}

<div>125px</div>
<div class="five">5% +</div>

Answer 3

#rectangle {
  height: 48px;
  width: 125px;
  background: red;
}

#bigger-rectangle {
  height: calc(48px * 1.05);
  width: calc(125px * 1.05);
  background: green;
}

<div id="rectangle"></div>
<div id="bigger-rectangle"></div>

Answer 4

计算器中

125 * 1.05和48 * 1.05？