動態調整圖像大小。

Question

我想使用標籤將圖像大小更改爲200x150。你能幫我做這件事嗎？

Answer 1

像這樣：

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

Answer 2

<img width="200" height="150" src="myimage.jpg" /> 

???

Answer 3

您的意思是？

<img src="path/to/img" width="200" height="150" /> 

Answer 4

你剛纔設置的寬度和高度屬性：

<img src="..." width="200" height="150" alt="..." /> 

請注意，這只是更改如何顯示圖像。從服務器加載的文件尺寸仍然相同，因此加載時間仍然很長。此外，從瀏覽器到瀏覽器的視覺效果也各不相同，一些最新的瀏覽器在調整圖像大小方面非常出色，但通常這種調整大小的圖像看起來很糟糕。

如果你想要最好的質量這種方法不會做。您必須調整實際圖像的大小，而不是隻指定它的顯示方式。

Answer 5

其他答案是正確的。他們按照你的要求去做。但是：

1. 質量可能受損。製作一個漂亮的縮略圖需要插值。
2. 如果圖像比您想要的尺寸小，您會看到一個粗糙的圖像。
3. 如果圖像較大，您仍然會加載整個事物（並吸取您的帶寬）。爲了解決這個問題，您需要動態或靜態地生成縮減採樣縮略圖。

要解決這些問題，您可以離線創建小圖片（如果這適合您的應用程序），或冒險進入imagemagick或類似的東西來提高它們的效率。

Answer 6

正如Guffa所說，使用圖片標籤的寬度和高度屬性只會影響瀏覽器顯示的方式。

如果你想調整圖像大小，你必須使用服務器端代碼（如asp.net，php，...）並提供調整大小的圖像，或者你必須調整它的大小與圖片manualy編輯。