html - 将大小设置为百分比的图像与窗口调整大小保持相同的比例

Question

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

全尺寸：

小尺寸版本：

注意图标大小的不同。

我的代码：

<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