圖像高度和寬度被CSS覆蓋

Question

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

我的html主體標簽中有上述一行。 但是，此處指定的高度和寬度被樣式表中為img指定的高度和寬度所覆蓋。

為什么會這樣？

Answer 1

此時，您將更多地設計圖像元素的樣式。 width和height 屬性最初告訴瀏覽器，當頁面加載時，這些圖像在屏幕上需要留出必要的空間量。

提示：始終同時指定圖像的高度和寬度屬性。 如果設置了高度和寬度，則在加載頁面時保留圖像所需的空間。 但是，如果沒有這些屬性，瀏覽器將不知道圖像的大小，並且無法為其保留適當的空間。 效果是頁面布局將在加載過程中（圖像加載時）改變。

Answer 2

嘗試使用內聯樣式來覆蓋您的css文件，或在HTML頁面中為您的圖像的css選擇器指定更多選項。

<img src="img_forest.jpg" alt="Forest" style='width:600px !important; height:400px !important;'>

Answer 3

這是因為width和height屬性設置了圖像的固有寬度和高度。

默認情況下， width和height CSS屬性的值是auto 。 由於圖像是替換的元素，因此這意味着將使用固有大小（第10.3.2節和第10.6.2節）。

但是，您可以使用一些聲明覆蓋它，然后圖像將以指定的大小顯示。

如果您不希望這樣做，請添加重要的內嵌樣式，這些樣式不能被覆蓋：

<img src="img_forest.jpg" alt="Forest" width="600" height="400"
     style="height: auto !important; width: auto !important" />

 img { height: 100px; width: 500px; }

 <img src="/favicon.ico" alt="Forest" width="16" height="16" style="height: auto !important; width: auto !important" />

Answer 4

您可以看到width="600"是一個屬性，而width:100px是一個屬性。 在渲染時，這些屬性將轉換為相應的樣式，並放置在樣式表的開頭。

檢查接受的答案單擊此處。 這就是你想要的。