昨天介紹了圖片元素及必要屬性，今天就直接來應用吧！

加入圖片

1. 使用絕對路徑
   在圖片上按右鍵，選擇「複製圖片網址」
   
   將網址貼到src屬性值中，再加上alt描述圖片

   <img src="https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408-825x465.jpg" alt="Beautiful colors of the sky with sun rays">
   

   顯示結果：
   

2. 使用相對路經
   在practice資料夾中新增一個img資料夾，將圖片下載到這個資料夾中，再從VS Code的Explorer中，在圖片檔案上按右鍵即可複製圖片相對位址。
   
   接下來一樣將相對位址貼到src，再加上alt。

   <img src="img\sky.jpg" alt="Beautiful colors of the sky with sun rays">
   

   顯示結果：
   

提示文字

若想要滑鼠移到圖片上時會顯示提示文字，可以使用第八天提過的title屬性。

設定大小

加入的圖片大小可能不符合你的期待，這時候就可以用以下兩個屬性來調整圖片大小。

• height屬性
  • 設定圖片高度
  • 單位可用 px（pixel）或 %（百分比）
• width屬性
  • 設定圖片寬度
  • 單位可用 px（pixel）或 %（百分比）

若希望圖片大小可以隨著瀏覽器大小變動，可以選擇設定pixel。
相反的，若不希望圖片大小隨著瀏覽器大小變動，可以選擇設定百分比。

height="200px"

height="400px"

width="100%"

width="70%"

今天的練習就到這邊，百分比和pixel的差異再多嘗試可以更多了解其特性，明天會講如何製作超連結，我是YQ，明天見。