以百分比设置的 HTML / CSS 图像尺寸在 Safari 中无法正确显示答案

【问题标题】：HTML / CSS image dimensions set in percentage doesn't display properly in Safari以百分比设置的 HTML / CSS 图像尺寸在 Safari 中无法正确显示
【发布时间】：2012-03-07 11:28:44
【问题描述】：

我正在开发一个适合移动设备的网站，我对我目前遇到的图像属性问题感到有些困惑。

我将其尺寸设置为百分比。它在 IE7+、Firefox 和 Chrome 但不是 Safari 上显示良好。它严重扭曲了图像！

是否需要使用 JavaScript 才能正确显示图像？

提前谢谢...

【问题讨论】：

您能否提供代码 sn-p 或小提琴或相关页面的链接？
请提供一些相关的代码/小提琴/屏幕截图，这样至少我们可以看到您面临的问题。
谢谢大家，还在草稿中：marklaurel.com/uft/000.tmplt.html

标签： html css safari responsive-design

【解决方案1】：

有问题的代码：

<img src="images/uftMap.jpg" border="0" width="95%" height="95%" alt="Universal Fitness &amp; Training on Google maps" name="Universal Fitness &amp; Training on Google maps">

去掉height属性，浏览器会按比例缩放。

将百分比放在高度和宽度属性中并不是严格意义上的合作。来自HTML5 spec

高度 = 非负整数：图片的高度，以 CSS 像素为单位。

宽度 = 非负整数：图片的宽度，以 CSS 像素为单位。

如果您打算设置此内联样式而不是样式表，则最好使用样式属性：

<img src="images/uftMap.jpg" border="0" style="max-width: 95%" alt="Universal Fitness &amp; Training on Google maps" name="Universal Fitness &amp; Training on Google maps">

【讨论】：

将百分比放在高度和宽度属性中并不是严格意义上的合意。从 HTML5 规范 w3schools.com/tags/tag_img.asp 仔细检查 Safari 什么时候玩得不好。我将继续使用“最大宽度”属性。
@Mark Laurel 有比w3fools 更好的资源 ;-) 总是最好去源头，W3C 如果我的回答解决了你的问题，接受它，它会添加给我的代表并增加你的接受百分比。
挖掘 w3fools 链接...诚然，我没有点击谷歌的许多搜索结果——我点击的第一个链接是苹果的开发者部分，但没有太大帮助。所以我点击了第二个或第三个，那是我找到 w3schools 的地方。我对 Safari 完全兼容 HTML5/css3 感到困惑。所以我想在这里要求仔细检查我的代码。