以百分比形式設置的HTML/CSS圖像尺寸在Safari中無法正確顯示

我正在開發一個適用於移動設備的網站&我對這個問題感到有點困惑，我現在有一個圖像屬性。以百分比形式設置的HTML/CSS圖像尺寸在Safari中無法正確顯示

我將它的尺寸設置爲百分比。它顯示罰款與IE7 +，火狐& Chrome，但不是Safari。它大幅扭曲了圖像！

我是否需要使用JavaScript才能正常顯示圖像？

在此先感謝...

來源

2012-03-07 Mark Laurel

你可以提供一個代碼片段或小提琴或連結有問題的網頁？ – Jrod 2012-03-07 01:33:35

請提供一些相關的代碼/小提琴/屏幕截圖，以便至少我們可以看到您面臨的問題。 – w3uiguru 2012-03-07 02:50:36

謝謝你們，仍在草稿中： http://marklaurel.com/uft/000.tmplt.html – 2012-03-07 02:57:45

代碼中的問題：

<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

height =非負整數：圖像的高度，以CSS爲單位。

width =非負整數：圖像的寬度，以CSS爲單位。

如果你在這個造型內嵌而不是一個樣式表集，你會用style屬性更好：

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

來源

2012-03-07 03:16:05 steveax

把百分比放在高度和寬度屬性上並不是嚴格的協同。從HTML5規範< - 我沒有意識到這一點......我去這裏http://www.w3schools.com/tags/tag_img.asp來仔細檢查當Safari不會很好玩。我將使用「最大寬度」屬性。 – 2012-03-07 18:28:19

@Mark Laurel有比[w3fools]（http://w3fools.com/）更好的資源;-)總是最好去源，[W3C]（http://www.w3.org /）如果我的答案解決了您的問題，請接受它，它將添加到我的代表並添加到您的接受百分比。 – steveax 2012-03-08 02:05:09

挖掘w3fools鏈接......我承認，我沒有點擊谷歌的許多搜索結果 - 我點擊的第一個鏈接是來自蘋果的開發者部分，但沒有太大的幫助。所以我點擊了第二或第三，這是我發現w3schools的地方。我很困惑，因爲我瞭解Safari IS完全兼容HTML5/css3。所以我想問問這裏仔細檢查我的代碼。 – 2012-03-08 18:06:28

以百分比形式設置的HTML/CSS圖像尺寸在Safari中無法正確顯示

回答

相關問題