0

如何在用HTML網頁中加入外部圖檔 +按比例調整圖片大小

如何加入圖檔

利用image tag加上src的Attribute (屬性)就可以做到了。

記得的話就來看下加圖片到網頁的代碼

<img src="圖檔的網址" alt="一張外部圖檔">

你會看到我用了image tag的兩個屬性,src 和 alt

  • src 是告訴html圖檔放在那裡
  • alt 是這個圖是甚麼的描述,這個不加也可以,但加了的話對於一些網站搜索器更容易了解你的圖片實際講甚麼,習慣上加了是有好處的

加入外部圖檔

外部圖檔意思即圖檔不在自己電腦上,而在網路上,這些圖片都有自己獨立的網址

作個示範,假設我在別的網站找到這幅蘋果圖片,現在想要加到自己網頁中,我們要先複製這圖片的網址。

複製網址的方法就是把滑鼠放在圖片上,然後點右鍵—>點複製圖片連結網址,好像下圖一樣 複製圖片連結網址

把已複製的圖片網址(這張蘋果圖的網址是
https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg)
貼到src 屬性那裡。

養成好習慣也記得加alt屬性的圖片描述,我就寫了"一個蘋果"。

<img 
src="https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg" 
alt="一個蘋果">

你就能看到結果啦~
一個蘋果

調整圖片大小

圖片大小不對的話加以加入widthheight,闊度和高度的屬性來控制圖片大小,你就根據自己想要的去調下這兩個數字就可以啦,例如我調這個蘋果圖成都是150像素寛和高

<img src="https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg" 
alt="一個蘋果" 
width="150px" 
height="150px"
>

就成這樣
一個蘋果

自己調的寛和高比例不一定準確

有時候你調的高和寛不太準的,例如我現在很不實際的調這蘋果圖的高度為50像素,就會成這樣

一個蘋果

這個如果不是蘋果,是人的臉顯示成這樣就不太好

梁浩賢

自動按比例縮放的方法

你會想按比例的縮放圖的大小,方法就是只設定width或者只設定height,兩者只選一個去設定。你只設定闊度,高度就會按比例去放大或者收縮,反之亦然。

這次我只設定寛度成250px,因為我這張圖高度和寛度比例是一比一,所以在不設定高度下,瀏覽器會為我自動將高度設成按比例的也設成250px。

<img src="https://www.leunghoyin.com/img/leunghoyin-sqr-300x300.jpg" 
width="250px" 
alt="梁浩賢">

當然你只設定高度,不設定寛度在這個例子上效果是一樣的。

一下子我的臉就變回成常了!
梁浩賢

梁浩賢
本文作者 : - 資深網站軟件工程師
想看更多類似內容的可選擇
有用嗎? 分享本篇文章給朋友吧~

再看看其他?