HTML5 img標籤尺寸

Question

定義<img>的寬度和高度的「正確」方法是什麼？ 它會通過具有「寬度」和「高度」屬性的標籤通過目錄嗎？還是通過CSS img { width:...; height... }更好？

Answer 1

在這種情況下，它確實是正確的方式，實際上沒有錯誤的方法來指定圖像標記本身的寬度和高度。特別是在網站的渲染階段，如果指定了尺寸，那麼瀏覽器不需要嘗試計算圖像的大小，這樣做的性能會有小幅提升。

From the spec：

「作者要求：width和height屬性上IMG，iframe中，嵌入，對象，視頻和，當它們的類型屬性是在圖像按鈕狀態，可以將指定的輸入元件，得到元素的視覺內容的尺寸「。

Answer 2

元素的所有樣式都應該使用CSS完成。在大多數情況下，高度和寬度屬性被認爲不再有效。這樣你可以將風格和佈局與功能分開。它也應該導致更清潔的HTML代碼和更小的文件。

Answer 3

兩種方式都是「正確的」。

使用情況取決於個人喜好或政治（企業）決策。

我自己認爲最好把它放在css中。

Answer 4

你應該總是喜歡CSS到HTML屬性。 HTML是爲了定義結構，而CSS告訴瀏覽器如何呈現它。

Answer 5

兩種方式都是fine。 width和height屬性是可選的。如果沒有指定，則將使用資源的維度。

我傾向於在正確的width和height屬性中指定它們，因爲它們與使用的src密切相關。把它們放在樣式表中是沒有意義的。

從規範（重點煤礦）：上IMG，IFRAME，....和可以指定給的可視內容的尺寸的輸入元件

寬度和高度屬性元素（寬度和高度，分別相對於輸出媒體的名義方向），CSS像素。屬性（如果指定）必須具有有效的非負整數值。

Answer 6

對於一次使用的單個獨特內容圖像，沒有理由不使用內聯width/height屬性。即使在嚴格的情況下，它們仍然有效。

情形之一的CSS規則會更好：

• 有一些圖像的情況下，或多個圖像大小相同的。一條規則可以讓你減少你必須寫的標記數量;

• 該圖像是佈局特徵而不是內容的一部分;不同的樣式表可能需要調整它的大小;

• 我可能要使用更復雜的尺寸規則，而不是width/height屬性允許，如% -sizing或max-width。