（第十八期）圖像標簽的三個常用屬性：width、height、border
在網頁開發中，控制圖片尺寸與樣式是基礎又高頻的操作。本文圍繞 img 圖像標簽的三個屬性展開：width（寬度）、height（高度）、border（邊框）。我們將用通俗的語言、嚴謹的邏輯幫你掌握它們的概念、寫法與實踐建議，并指出常見誤區與更佳做法。
適用場景與核心結論
- 只設置一個維度（寬度或高度其中一個），另一個會按比例自適應，圖片不易變形。
- 不建議使用
border屬性，推薦用 CSS 設置邊框（含顏色、粗細、圓角等）。 - 數值無單位時默認是 像素（px）。
一、width：設置圖像寬度
- 作用：定義圖片渲染時的寬度（單位：px）。
- 語法：給
img標簽添加width="數值"。 - 特點：僅設置寬度時，高度會按原始寬高比自動等比縮放，避免失真。
示例（僅設置寬度，等比縮放高度）：
<img src="example.jpg" alt="示例圖片" width="500">
使用建議：
- 精確像素圖（如 UI 切圖）可用固定
px值。 - 響應式頁面建議配合 CSS 百分比或
max-width: 100%等方案。
二、height：設置圖像高度
- 作用：定義圖片渲染時的高度（單位：px）。
- 語法：給
img標簽添加height="數值"。 - 特點：僅設置高度時，寬度會按比例自動縮放。
示例（僅設置高度，等比縮放寬度）：
<img src="example.jpg" alt="示例圖片" height="100">
使用建議：
- 與
width一樣，不要同時固定width與height，否則極易拉伸變形。 - 僅設一個維度，交給瀏覽器保持原始比例更穩妥。
三、border：設置圖像邊框（了解為主）
- 作用：為圖片添加邊框。
- 狀態：HTML 的
border屬性在現代開發中已不推薦使用；樣式應交給 CSS。 - 推薦做法：用 CSS 控制邊框的粗細、顏色、樣式和圓角等。
不推薦（舊寫法，僅演示）：
<img src="example.jpg" alt="示例圖片" border="15">
推薦（使用 CSS，控制更強）：
<img src="example.jpg" alt="示例圖片" style="border: 15px solid #000; border-radius: 8px;">
或使用類名，樣式集中管理：
<img class="avatar" src="example.jpg" alt="用戶頭像"><style>.avatar {border: 15px solid #000;border-radius: 8px;}
</style>
四、實戰組合案例
- 僅設寬度（常用）：
<img src="example.jpg" alt="示例圖片" width="480">
- 僅設高度（謹慎使用）：
<img src="example.jpg" alt="示例圖片" height="120">
- CSS 統一控制邊框（推薦）：
<img class="photo" src="example.jpg" alt="示例圖片"><style>.photo {max-width: 100%;height: auto; /* 保持等比 */border: 12px solid #333;border-radius: 10px;}
</style>
五、常見問題與避坑指南
-
為什么圖片被“壓扁/拉伸”？
同時固定width和height，與原始比例不匹配導致。解決：只設一個維度，或根據圖片原始比例計算另一個值。 -
怎么確定像素數值？
參考設計稿或用開發者工具/標注工具測量，再填寫px數值。響應式場景下優先用 CSS 百分比和max-width。 -
想要圓角、顏色、虛線邊框？
統一用 CSS：border（粗細/樣式/顏色）、border-radius（圓角），靈活強大。
小結
- width：設置圖片寬度；只設一個維度，避免變形。
- height：設置圖片高度；與 width 二選一更保險。
- border：不建議用 HTML 屬性；使用 CSS 控制邊框與圓角。
- 實際開發中，優先用 CSS 管控尺寸與樣式（配合
max-width: 100%與height: auto實現自適應）。
)