Преобразование пикселей в проценты с использованием CSS

Question

У меня есть прямоугольник , ширина 125px и высота 48px. Я пытаюсь сделать прямоугольник 5% больше. Как я могу увеличить прямоугольник на 5%, зная ширину и высоту в пикселях.

Answer 1

calc функция CSS является вашим другом:

.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% будет 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>