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

Question

我有一个矩形，宽度是125px，高度是48px。我正在尝试使矩形 大 5%。如何在知道宽度和高度（以像素为单位）的情况下将矩形增加 5%。

Answer 1

CSS的calc函数是你的朋友：

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

Answer 2

#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 3

125 * 1.05 和 48 * 1.05 在你的计算器中？

Answer 4

另一种选择是使用 Transform - Scale

5% will be 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>

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

Converting pixels into percentages using CSS

html

css

pixel