HTML - width 屬性

可以使用 HTML 的width 屬性指定元素的寬度，該屬性通常用於圖片、表格和表格單元格等元素。可以使用畫素或父容器百分比來指定寬度。它對於管理網頁內容的組織和呈現至關重要。

透過定義 width 屬性，Web 開發人員可以確保一致且響應式的設計，使其成為實現所需視覺效果和確保內容適合指定區域的重要工具，從而改善使用者體驗。但是，對於靈活的網站設計，通常會選擇 CSS 而不是固定寬度屬性。

語法

以下是 width 屬性的語法：

<element width = " " >

其中 width 應為畫素值。

示例

在下面的示例中，我們建立一個 HTML 文件，並在 <img> 標籤上使用 width 屬性。

<!DOCTYPE html>
<html>
<body>
   <h1>The img tag with width attribute</h1>
   <img src="https://tutorialspoint.tw/images/logo.png?v2" alt="Logo" width="400" height="100">
</body>
</html>

執行上述程式碼後，輸出視窗將彈出，在網頁上顯示圖片。

示例

考慮另一種情況，我們將 width 屬性與 embed 標籤一起使用。

<!DOCTYPE html>
<html>
<body>
   <h1>The embed height and width attributes</h1>
   <embed type="image/jpg" src="https://t3.gstatic.com/images?q=tbn:ANd9GcRFOuSwoPG5luSDx4onb42RzGz8EoCcjqqed6dDOpjYFTJ5dG01" width="200" height="100">
</body>
</html>

執行上述程式碼後，將生成一個輸出，其中包含在網頁上顯示的圖片。

示例

讓我們看看下面的示例，我們將 width 屬性與 canvas 標籤一起使用。

<!DOCTYPE html>
<html>
<body>
   <h1>width attribute with Canvas element</h1>
   <canvas id="myCanvas" width="200" height="100" style="border:1px solid"></canvas>
   <script>
      const c = document.getElementById("myCanvas");
      const ctx = c.getContext("2d");
      ctx.fillStyle = "#64f56e";
      ctx.fillRect(60, 10, 80, 80);
   </script>
</body>
</html>

執行上述程式碼後，輸出視窗將彈出，在網頁上顯示 canvas。

示例

以下示例演示瞭如何將 width 屬性與 object 標籤一起使用。

<!DOCTYPE html>
<html>
<body>
   <h1>width attribute with object element</h1>
   <object data="https://tutorialspoint.tw/images/logo.png?v2" width="300" height="100"></object>
</body>
</html>

執行上述程式碼後，將生成一個輸出，其中包含在網頁上顯示的圖片。

html_attributes_reference.htm

列印頁面