HTML圖像的寬度和高度屬性

Question

我真的很簡單的問題，我希望能看到一些偉大的建議:-)

什麼是寬度和高度屬性的正確用法？
假設我需要與下列寬度和高度顯示圖像：150×100 pixles

<img src="..." alt="My Image" width="300" height="200" /> // the real width and height 

或

<img src="..." alt="My Image" width="150" height="100" /> // the desired width and height (also defined in CSS) 

Answer 1

你應該顯示寬度/高度如在屏幕上的像素的大小。

w3schools HTML width attribute documentation

如果高度和寬度被設置時，針對圖像所需要的空間是 加載頁面時保留。但是，如果沒有這些屬性，瀏覽器不知道圖像的大小，並且不能保留 適當的空間它。效果將是頁面佈局 將在加載期間發生更改（圖像加載時）。

圖像的實際尺寸是不相關的。瀏覽器會相應地處理。

Answer 2

一般一個想以保持圖像的縱橫比。所以你可以這樣做

<img src="..." alt="My Image" width="150"/> 

在這種情況下將獲得100的高度。希望有幫助。

Answer 3

寬度和在img標籤高度是用來顯示在所希望的尺寸的圖像。如果我們設置圖像的寬度和高度。圖像將以指定的寬度和高度顯示在網頁上。 如果我們想要以與實際尺寸不同的尺寸顯示圖像，圖像將重新調整到指定的寬度和高度。如果未指定寬度和高度，圖像將以實際大小顯示。大多數情況下，我們不需要指定img高度。如果指定寬度，它將保持寬高比。所以，如果你想顯示在150像素X 100像素的圖像，你可以使用

<img src="..." alt="My Image" width="150px" height="100px" /> 

或

<img src="..." alt="My Image" width="150px" /> 

你也可以用％來指定在HTML4的大小。這種衡量標準涵蓋了其母公司總面積的指定百分比。

<img src="..." alt="My Image" width="50%" /> 

但是在HTML5中，您應該指定尺寸（以像素爲單位）。