在窗口调整大小的情况下，将图像的大小设置为相同比例的百分比

Question

我正在构建一个Web应用程序。使用百分比设置图像的大小。我有三个图像与另一个用作工具栏的图像重叠。当我在全屏显示浏览器时显示图像时，它们看起来很好。但是，当我在屏幕较小的情况下显示它们时，图像大小与屏幕的比例似乎会发生变化。我该怎么做才能改变这个？

完整尺寸：

尺寸较小的版本：

注意图标大小的差异。

我的代码：

<div id="bottombar" data-position="fixed">
                    <img id="ico" class="foodico" src="images/icons/Food1.png" width="3%">
                    <img id="ico" class="shopico" src="images/icons/Shop1.png" width="3%">
                    <img id="ico" class="activityico" src="images/icons/Activity1.png" width="3%">
                    <img id="Bbackground" src="images/icons/NavBarBackground.png" width="100%" height="7.8%">
                </div>

Answer 1

如果您将height设置为设定金额，除非他们所在的容器的height属性减少，否则它们不会变小。