圖片是網頁中不可或缺的視覺元素。今天會介紹如何在網頁中運用圖片，從基本匯入方法、格式選擇到尺寸調整技巧。

那我們就開始吧！

HTML 圖片標籤

要將圖片匯入網頁的第一種方式是使用 HTML 的 <img> 標籤。這是在網頁中顯示圖片最直接的方式。<img> 標籤屬於自閉合標籤，不需要結束標籤。使用方式如下：

• 格式說明

  • alt：替代文字，當圖片無法載入時顯示（對 SEO 和無障礙很重要）。

  • src：圖片來源路徑，有兩種路徑格式，說明如下：

    

圖片格式選擇

選擇適當的圖片格式可以最佳化網頁載入速度並提升視覺效果。以下是常見的圖片格式及其適用場景：

• PNG：適合透明背景和簡單圖形，支援透明度，無損壓縮，一樣的圖形通常容量較大。
• JPEG：適合照片和複雜圖像，一樣的圖形通常容量較小，但需要注意圖片品質，不支援透明度。
• WebP：現代格式，更小檔案大小，同時支援有損和無損壓縮，也支援透明度，但舊版瀏覽器支援度較低。
• SVG：適合向量圖形和圖標，可縮放無失真，檔案大小通常較小，適合網站圖標和簡單圖形。

圖片尺寸設定

當尚未設定圖片尺寸時，預設會使用原圖尺寸，這可能會導致顯示過大或過小，因此需要進一步調整圖片尺寸，一般有兩種設定圖片樣式的方式：

1. 在 <img> 本身設定尺寸：直接在圖片上設定 class，並直接在圖片上設定尺寸屬性。

   <img
     src="images/photo.jpg"
     alt="照片"
     class="responsive-image"
   >
   

   .responsive-image {
     width: 100%;
     height: auto;
     border-radius: 8px;
   }
   

2. 使用容器控制圖片尺寸：建立一個圖片容器並設定 class，將尺寸屬性套用於外層容器，然後讓內部圖片填滿整個容器。

   <div class="image-container">
       <img src="images/photo.jpg" alt="照片">
   </div>
   

   .image-container {
       width: 300px;
       height: 200px;
       overflow: hidden;
       border-radius: 10px;
   }
   .image-container img {
       width: 100%;
       height: 100%;
   }
   
   

處理圖片變形問題

當圖片的原始比例與容器比例不同時，直接設定 width: 100%; height: 100%; 會造成圖片變形。只要在圖片加上 object-fit 屬性設定，即可解決這個問題：

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例，裁切多餘部分 */
}

• object-fit 的不同值

  • object-fit: none; - 保持原始大小

  • object-fit: cover; - 保持比例，裁切多餘部分填滿容器

  • object-fit: contain; - 保持比例，完整顯示圖片，可能留白

  • object-fit: fill; - 拉伸填滿容器（預設值，會變形）

  • object-fit: scale-down; - 會在 none 和 contain 兩種模式選一個（選擇讓內容顯示得更小的模式）

    

CSS 背景圖片

除了在 HTML 中匯入圖片之外，也可以透過 CSS 匯入圖片，此方法特別適合用於元素的裝飾。

Background-image 屬性

在前面的章節中，有學習到如何使用 background 來設定純色和漸層背景。background 還提供了一個名為 background-image 的屬性，專門用來設定背景圖片，讓我們能在 CSS 中使用圖片並插入於網頁中：

.image-container {
   background-image: url('images/background.jpg');
}

圖片尺寸與位移設定

與 HTML 圖片標籤不同，CSS 背景圖片是套用在元素上的屬性，而非獨立的圖片元素，因此本身不佔據空間。使用背景圖片時，該元素必須具有明確的尺寸設定，或內部含有其他具尺寸的元素，才能讓背景圖片正確顯示。

.image-container {
  background-image: url('images/background.jpg');
  width: 100%;
  height: 400px;
}

設定圖片尺寸後，會發現 CSS 背景圖片與 HTML 圖片標籤有一個明顯差異，背景圖片不會強制變形，但會預設無限重複延伸。針對這個特性，background-image 提供了多種屬性可以調整：

.image-container {
  background-image: url('images/background.jpg');
  width: 100%;
  height: 400px;

  background-repeat: no-repeat; /* 背景圖片不重複 */
  background-size: cover;       /* 背景圖片尺寸填滿元素，但不強制變形 */
  background-position: center;  /* 背景圖片位置定位在中間 */
}

• 背景圖片屬性

  • background-image：設定背景圖片

    • 圖片路徑語法與 HTML 相同，可使用相對路徑或絕對路徑。

  • background-size：控制圖片大小

    • background-size: cover; - 保持圖片比例填滿容器，必要時裁切部分圖片

    • background-size: contain; - 完整顯示圖片，保持比例縮放至最大可能尺寸

    • background-size: 50%; - 將圖片縮放至容器寬度的 50%，高度自動調整

    • background-size: 100px 200px; - 將圖片精確設定為寬 100px、高 200px

      

  • background-repeat：控制重複方式

    • background-repeat: repeat; - 背景圖片無限重複延伸（預設值）

    • background-repeat: no-repeat; - 背景圖片只顯示一次，不重複

      

  • background-position：控制位置

    • background-position: 10% 50%;- 水平方向偏移 10%，垂直方向偏移 50%

    • background-position: center center;- 也可以寫關鍵字 (top, bottom, left, right, center)

      

  • background-attachment：控制滾動行為

    • background-attachment: scroll;- 背景會隨著頁面滾動而滾動（預設值）

    • background-attachment: fixed;- 背景會固定不動，頁面滾動時背景保持在原位

      

總結

今天介紹了在網頁中使用圖片的兩種方式：HTML 的 <img> 標籤，以及 CSS 的 background-image 屬性。

使用 object-fit 可以避免圖片變形；如果使用 CSS 背景圖片，則可以搭配 background-size 與 background-position 等屬性，控制圖片的尺寸與位置。實際使用時，可以依照圖片的用途選擇適合的方式！