如何在 HTML 页面中使用图像的高度和宽度属性？

图片通过帮助读者更好地理解网页上的内容，使内容更有趣。

我们可以在 HTML 页面中插入图片。要在 HTML 页面中插入图片，请使用<img>标签。它是一个空标签，只包含属性，因为不需要结束标签。

src属性用于添加图像源，即图像的 URL（文件位置）。alt属性用于添加替代文本，width 用于添加宽度，height 用于添加图像的高度。

我们使用 style 属性来更改图像的大小，即图像的高度和宽度。

语法

以下是更改 HTML 页面上图像高度和宽度的语法。

<img src="url" alt="some_text" width="" height="">

示例

在下面的示例程序中，我们使用 style 属性更改了图像的高度。

<!DOCTYPE html>
<html>
<body>
   <img src="https://tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="300px">
</body>
</html>

示例

在下面的示例程序中，我们使用 style 属性更改了图像的宽度。

<!DOCTYPE html>
<html>
<body>
   <img src=" https://tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" width="500px">
</body>
</html>

示例

在下面的示例程序中，我们使用 style 属性更改了图像的宽度和高度。

<!DOCTYPE html>
<html>
<body>
   <img src="https://tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="200"width="400px">
</body>
</html>

更新于： 2022年11月11日

2K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告