HTML - height 屬性

HTML 的 **height** 屬性用於指定元素的垂直尺寸。我們也可以使用 **height** 作為 CSS 中的屬性來指定元素的高度。

此屬性對於保持元素的縱橫比和確保設計一致性至關重要。透過管理內容中專案的視覺化呈現，Web 開發人員可以控制高度屬性以建立畫素完美的佈局並改善使用者體驗。

語法

<tag height = 'value'></tag>

任何 CSS 測量值都將被接受為 height 屬性值。

應用於

以下列出的元素允許使用 HTML height 屬性

元素	描述
<img>	HTML <img> 標籤用於在網頁中渲染影像。
<canvas>	HTML <canvas> 用於使用 JavaScript 繪製圖形。
<embed>	HTML <embed> 標籤用作外部應用程式和多媒體的容器。
<iframe>	HTML <iframe> 是一個內聯框架，允許我們在當前 HTML 文件中嵌入另一個文件。
<input>	HTML <input> 用於接受使用者提供的各種型別的輸入。
<object>	HTML <object> 標籤用於在網頁上顯示多媒體，包括音訊、影片、圖片、網站、PDF 和 Flash。
<video>	HTML <video> 用於在網頁中渲染影片

HTML height 屬性示例

以下示例將說明 HTML height 屬性，以及我們應該在哪裡以及如何使用此屬性！

設定影像元素的高度

所有影像都有其自身的高度，但我們可以根據需要使用 HTML height 屬性設定高度。在此示例中，我們將使用 px（畫素）單位設定影像高度。您可以使用任何適合您的測量單位。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>
        Example of the HTML 'height' Attribute
    </h3> 
    <p>
        Here you can see the same image with different height value,
        as we did not set the width attribute so the width is adujusted
        based on height of the image.
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 50px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="50px">
    <br>
    <strong>Image with 100px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="100px"> 
</body>
</html>

設定輸入元素的高度

在以下示例程式碼中，我們將使用 input 標籤渲染影像並在輸入元素中設定影像的高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        In this example we set the width also so 
        the image can render on fixed dimension 350*100(w*h).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 100px height</strong>
    <br>
    <input type="image" src="/html/images/html-mini-logo.jpg" 
           height="100px" width="350px"> 
</body>

</html>

設定物件元素的高度

讓我們看看以下示例，我們將在此示例中對 object 元素使用 height 屬性。我們建立了一個影像物件來測試 object 元素上的 height 屬性。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        Here we did not mention any unit but you 
        can as per the need, without the unit it 
        measure in px(pixels).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Object with 300 height</strong>
    <br>
    <object data=
"https://www.plus2net.com/php_tutorial/images/pdf-student-table.PNG" 
            height="300"> 
    </object>
</body>

</html>

設定 canvas 元素的高度

在此示例中，我們正在建立一個 canvas 並使用 HTML height 屬性為 canvas 元素設定高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created a canvas 400*200 and using 
        JavaScript to fill the color by mentioning the coords
    </p>
    <!--HTML 'height' attribute--> 
    <canvas id="myCanvas" width="400" height="200">
    </canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(30, 50, 335, 100);
    </script>
</body>

</html>

設定 iframe 元素的高度

在這裡，我們使用 height 屬性設定 iframe 元素的高度並渲染 HTML 教程的登入頁面。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created an iframe 400*400 and 
        rendering HTML landing page
    </p>
    <!--HTML 'height' attribute--> 
    <iframe src="/html/index.htm" width="450" height="400">
</body>

</html>

設定嵌入元素的高度

在此示例中，我們將嵌入我們的 HTML 教程登入頁面，並將使用 height 屬性調整嵌入元素的高度

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have embedded an image and 
        rendering the image in 300*100
    </p>
    <!--HTML 'height' attribute--> 
    <embed type="image/jpg" src="html/images/html.jpg"
           width="300" height="100">
</body>

</html>

設定影片元素的高度

在此示例中，我們包含了一個影片並使用 height 屬性設定了影片元素的高度。由於連結損壞或訪問問題，影片可能無法播放。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have included a video and 
        rendering the video in 320*240
    </p>
    <!--HTML 'height' attribute--> 
    <video width="320" height="240" controls>
      <source src=
"https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" 
              type="video/mp4">
</body>

</html>

支援的瀏覽器

屬性
height	是	是	是	是	是

html_attributes_reference.htm

列印頁面