在所有尺寸的屏幕上保持尺寸相同

Question

我正在创建一款名为 Harvester 的游戏，当我更改浏览器窗口的大小或使用不同尺寸的屏幕时，我的图标看起来要么太短、要么太高、要么太胖、要么太瘦。但无论如何我希望它保持不变。

这就是我正在使用的：

/*/ Normal:

.example {
width: 50%;
height: 100%;
}

/*/ Larger Screen (What it looks like..)

.example {
width: 46%;
height: 39%;
}

我一直在使用 % 希望它与 px 不同。请帮忙！

Answer 1

您可以使用宽高比来保持图标的外观：

.example {
    width: 20%; /* whatever you want */
    aspect-ratio: 1 / 1; /* adjust this as needed */
}