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

【问题标题】：Keep images with size set to percentage on the same scale with window resize将大小设置为百分比的图像与窗口调整大小保持相同的比例
【发布时间】：2013-08-09 21:13:04
【问题描述】：

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

全尺寸：

小号版本：

注意图标大小的差异。

我的代码：

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

【问题讨论】：

您有多个具有相同 id ico 的元素。 ID 用于 DOM 中的唯一元素。你应该把它改成 class。
我希望他们调整大小，但我做错了。我对网络应用程序编程很陌生，来自本机编程。我希望在重新调整大小后比例保持不变。看看在调整大小之前，它们几乎接触到了栏的顶部。之后，它们很小，没有靠近顶部的地方。我不太关心保持不变的百分比，我只希望比例保持不变，无论它们调整到什么大小。也许我需要一些 javascript？
您能否发布与此问题相关的 CSS。如果你能做一个 jsFiddle 就更好了。
我现在要做一个 js fiddle

标签： html css jquery-mobile webapp2

【解决方案1】：

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

【讨论】：

谢谢！但是现在设置了高度，调整大小后，图像变得不成比例。
jsfiddle.net/vj2Fr/2 width:auto; 将控制其比例。以小提琴为例。