在IE和Chrome/Mozilla的Img大小不同

我有這個圖像標記。 IE和Chrome/Mozilla中的圖像大小各不相同。它在Chrome/Mozilla中運行良好，但是我發現IE中的圖像大小几乎增加了1000％。在IE和Chrome/Mozilla的Img大小不同

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15" width="15" />

我要去哪裏錯了？

來源

2013-11-05 python-coder

那麼你的CSS樣子，什麼是圖像的尺寸 – Deryck

圖片尺寸256×256是。我的CSS是內聯的（我已經提供的那個）。 –

這是爲了在不同瀏覽器（directly from normalize.css）上對圖像進行標準化處理，以及在朝着一個方向或另一個方向正確縮放圖像。

最後一行是修復縮放圖像的IE問題。

將其放入您的CSS文件。

img { 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
    max-width: 100%; 
    height: auto; 
    width: auto; 
    width: auto\9; 
}

對於內聯CSS：

<img style="border: 0;-ms-interpolation-mode: bicubic;max-width: 100%;height: auto;width: auto;width: auto\9;" src="{% static "/static/img/left_arrow.png" %}" alt="prev" width="15" height="15" />

你不應該比要向下擴展到更大的圖像做到這一點。用戶將下載完整的圖像，然後調整大小，浪費帶寬和CPU。這個尺寸的圖片並不是什麼大不了的，但請牢記在心。

來源

2013-11-05 05:11:45 Deryck

這是非常簡單的，使圖像的尺寸相同的所有瀏覽器

CSS

body 
    { 
    height:100%; 
    width:100%; 
    } 

.imageclass 
      { 
      height:15%; /* You can Change this according to you */ 
      width:15%; /* You can Change this according to you */ 
      }

HTML

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" class="imageclass"/>

這是因爲他對於外部標籤（div，span，body any）執行百分比的寬度和寬度。就像有一個高度爲100的div比如果有50％高於50，所以這就是爲什麼我把身體作爲％和圖像也作爲％。

來源

2013-11-05 06:18:52 ArmaGeddON

添加「px」可能會解決您的問題。

<img src="{% static "/static/img/left_arrow.png" %}" alt="prev" height="15px" width="15px" />

來源

2016-01-05 08:27:02 user5746794

在IE和Chrome/Mozilla的Img大小不同

回答

相關問題