js 圖檔縮放不超出父級元素範圍_我掏空了各大搜尋引擎，整理了HTML圖檔标簽筆記，滿滿幹貨...

img标簽介紹

介紹

img: 英文全稱 image（圖像），代表的是一張圖檔。

如果要想在網頁中顯示圖像，就可以使用img 标簽，它是一個單标簽。文法如下：

能插入的圖檔類型

• 能夠插入的圖檔類型是：jpg(jpeg)、gif、png、bmp等。
• 不能往網頁中插入的圖檔格式是：psd、ai等。

HTML頁面不是直接插入圖檔，而是插入圖檔的引用位址，是以要先把圖檔上傳到伺服器上。

img标簽的src屬性

這裡涉及到圖檔的一個屬性：

• src屬性：指圖檔的路徑。英文名稱 source。

在寫

圖檔的路徑

時，有兩種寫法：相對路徑、絕對路徑

寫法一：圖檔的相對路徑

相對目前頁面所在的路徑。兩個标記 . 和 .. 分表代表目前目錄和上一層目錄。

舉例1：

<!-- 目前目錄中的圖檔 -->
<img src="">
<img src=".\">

<!-- 上一級目錄中的圖檔 -->
<img src="..\">
           

相對路徑不會出現這種情況：

../要麼不寫，要麼就寫在開頭。

舉例2：

上方代碼的意思是說，目前html頁面有一個并列的檔案夾images，在檔案夾images中存放了一張圖檔 效果：

相對路徑的面試題。現有如下檔案層級圖：

問題：如果想在中插入，那麼對應的img語句是？

分析：

現在document是最大的檔案夾，裡面有兩個檔案夾work和photo。work中又有一個檔案夾叫做myweb。myweb檔案夾裡面有。 是以在myweb檔案夾裡面，上一級就是work檔案夾，上兩級就是document檔案夾。通過document檔案夾當做一個中轉站，進入photo檔案夾，看到了。

答案：

<img src="../../photo/" />
           

寫法二：圖檔的絕對路徑

絕對路徑包括以下兩種：

（1）以盤符開始的絕對路徑。舉例：

<img src="C:\Users\qianguyihao\Desktop\html\images\">
           

（2）網絡路徑。舉例：

<img src="http://img.smyhvae.com/20200122_20090">
           

大家打開上面的img中的連結，可能有驚喜哦。

相對路徑和絕對路徑的總結

相對路徑的好處：站點不管拷貝到哪裡，檔案和圖檔的相對路徑關系都是不變的。相對路徑使用有一個前提，就是網頁檔案和你的圖檔，必須在一個伺服器上。

問題：我的網頁在C槽，圖檔卻在D盤，能不能插入呢？

答案： 用相對路徑不能，用絕對路徑也不能。

注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為伺服器上沒有所謂c盤、d盤。

下面的方法是行的，但是沒有任何工程上的意義，這是因為伺服器沒有盤符，linux系統沒有盤符：

<img src="file://C:\Users\qianguyihao\Pictures\明星\" />
           

總結一下

：

無論是在 a 标簽還是 img 标簽上，如果要用路徑。隻有兩種路徑能用，就是相對路徑和絕對路徑：

• 相對路徑從自己出發，找到别人。
• 絕對路徑，就是http://或者https://開頭的路徑。
• 絕對不允許使用file://開頭的檔案，這個是完全錯誤的！

img标簽的其他屬性

width、height 屬性

• width：圖像的寬度。
• height：圖像的高度。

width和height，在 HTML5 中的機關是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以隻指定 width 和 height 中的一個值，浏覽器會根據原始圖像進行縮放。

重要提示

：如果要想保證圖檔等比例縮放，請隻設定width和height中其中一個。

Alt 屬性

• alt：當圖檔不可用（無法顯示）的時候，代替圖檔顯示的内容。alt是英語 alternate “替代”的意思，代表替換資源。

Alt屬性效果示範：

如上圖所示：當圖檔 src 不可用的時候，顯示文字。這樣做，至少能讓使用者知道，這個圖檔大概是什麼内容。

title 屬性

title 屬性不該被用作一幅圖檔在 alt 之外的補充說明資訊。如果一幅圖檔需要小标題，使用 figure 或 figcaption 元素。

title 元素的值一般作為提示條(tooltip)呈現給使用者，在光标于圖檔上停下後顯示出來。盡管這确實能給使用者提供更多的資訊，您不該假定使用者真的能看到：使用者可能隻有鍵盤或觸摸屏。如果要把特别重要的資訊提供給使用者，可以選擇上面提供的一種方法将其内聯顯示，而不是使用 title。

舉例：

<img src="images/" width="300" height="`188">
           

效果：

align 屬性

• 圖檔的align屬性： 圖檔和周圍文字的相對位置 。屬性取值可以是：bottom（預設）、center、top、left、right。

如果想實作圖文混排的效果，請使用align屬性，取值為left或right。

我們來分别看一下這align屬性的這幾個屬性值的差別。

1、align=""，圖檔和文字低端對齊。即預設情況下的顯示效果：

2、align="center"：圖檔和文字水準方向上居中對齊。顯示效果：

3、align="top"：圖檔與文字頂端對齊。顯示效果：

4、align="left"：圖檔在文字的左邊。顯示效果：

5、align="right"：圖檔在文字的右邊。顯示效果：

其他已廢棄的屬性

• Align（已廢棄）：指圖檔的水準對齊方式，屬性值可以是：top、middle、bottom、left、center、right。該屬性已廢棄，替換為 vertical-align這個CSS屬性。
• border（已廢棄）：給圖檔加邊框，機關是像素，邊框的顔色預設黑色。該屬性已廢棄，替換為 border這個CSS屬性。
• Hspace（已廢棄）：指圖檔左右的邊距。
• Vspace（已廢棄）：指圖檔上下的邊距。