響應圖像VS在HTML

我閱讀有關響應式設計指定圖像的寬度和高度，我發現了以下問題：響應圖像VS在HTML

一個關於「流體圖像」的建議是使用CSS規則如：

img { 
max-width: 100%; 
height: auto; }

但是爲了使它具有正確的影響，我們需要去除img標籤的內嵌圖像寬度和高度屬性。

如何解決與It’s important to specify the width and height of an image in HTML？

謝謝

來源

2012-06-01 ProgNet

您不需要去除圖像的寬度和高度屬性。

的jsfiddle：http://jsfiddle.net/7j3db/

測試在Chrome，Firefox，歌劇，IE9和IE9模仿IE7。似乎在他們所有的工作都很好，與你提到的確切的CSS規則。

編輯：用圖像測試的無法加載：http://jsfiddle.net/7j3db/1/

這不得不在Chrome和IE（甚至IE7）適當的作用，但不能在Firefox或Opera。但是，即使在Firefox和Opera中，效果也好於將寬度和高度屬性省略（因爲width屬性仍然有效，即使height屬性不起作用）。使用IE7完美處理IE9，但IE9加入Opera，而IE8做了一些非常奇怪的事情（圖片高度取決於alt文本的長度 - 越多alt文本越少，空間越小））。 Chrome似乎完全忽略了替代文字。歌劇和FF顯示替代文字，但在其他方面基本上與以前一樣。然而，寬度和高度屬性似乎不會對這些替代文本造成負面影響（除了在某種程度上，在IE8中除外）。

來源

2012-06-01 13:39:03 Brilliand

實際上，Firefox的行爲是當它無法加載時根本不顯示圖像 - 但是通過在圖像上放置「display：inline-block」，可以使其表現得像Opera一樣。 – Brilliand

謝謝你的回答。當我試着離開img標籤內的寬度和高度時，圖片在佈局視口大小發生變化時沒有縮放。我認爲，內聯寬度和高度是本地的，它們比CSS規則更強。對我來說，看起來我可以刪除寬度和高度屬性，然後我將擁有「流體圖像」，可隨着視口大小的變化進行縮放並犧牲頁面加載速度，或者保留這些屬性並犧牲「流體圖像」專業人士。如果我正確的話，我該如何選擇要犧牲的東西。 – ProgNet

就CSS而言，通過HTML中的屬性（即width =和height =）設置的值是最低優先級，而通過CSS設置的「style」屬性中的值是最高優先級。因此，Opera，Firefox和IE9行爲的理由是，如果您在CSS中設置了高度（甚至是「height：auto」），則完全忽略「height =」。 – Brilliand

雖然（我在其他答案說明）的width和height屬性不與流體圖像干擾，流體圖像確實與尚未加載圖像佔用的空間適量的不是Chrome瀏覽器的干擾。有這個解決方法：包裹所述圖像中與本徵比一個div，如本文中所描述：http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper { 
    max-width: 200px; /* The actual width of the image */ 
} 

.img-wrapper2 { 
    height: 0; 
    padding-bottom: 100%; /* The image's height divided by its width */ 
}

不幸的是，這需要兩個包裝的div，爲了得到最大寬度效應的權利。但是，它確實提供了與表示加載速度相同的優點，即width和height屬性提供的優點。您可能想要給.img-wrapperoverflow: hidden隱藏較舊的IE的一些病態行爲。

的jsfiddle：http://jsfiddle.net/7j3db/32/

來源

2012-06-19 22:07:25 Brilliand

您可以通過添加

html, body{ 
max-width:100%; 
width:100%; 
}

，也將在img標籤的父DIV這些屬性實現這一目標。

來源

2012-09-29 13:36:18

謝謝，這正是我正在尋找的。另外，當使用沒有固定寬度/高度屬性的圖像時，可以使用「height：auto」屬性來保持所有圖像的比例。 – Jake

我的快樂傑克先生 –

響應圖像VS在HTML

回答

相關問題