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

Question

我正在一个移动友好的网站上工作,我对这个目前有图像属性的问题感到有些困惑.

我将其尺寸设置为百分比.它适用于IE7 +,Firefox和Chrome,但不适用于Safari.它大大扭曲了形象!

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

提前致谢...

Answer 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规范

height =非负整数:图像的高度,以CSS像素为单位.

width =非负整数:图像的宽度,以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">