html中图片设置宽高

在HTML页面中，图片往往是网页设计的重要组成部分。为了使图片在页面上展示得更好，我们可以通过设置图片的宽度和高度来达到更理想的效果。本文将向你介绍如何使用HTML设置图片的宽度和高度。 要设置图片的宽度和高度，我们只需要在标签中加入相应的属性即可。其中，width属性用于设置图片的宽度，height属性用于设置图片的高度。下面是一个示例：

<img src="picture.png" width="200" height="150">

在这个例子中，我们设置了一张名为picture.png的图片，宽度为200像素，高度为150像素。 除了直接指定像素值，我们还可以使用百分比来设置图片的大小。比如，我们可以将宽度设置为50%，高度设置为auto（自适应）：

<img src="picture.png" width="50%" height="auto">

此时，图片的宽度将相对于其父容器的宽度大小为50%。高度则会根据宽度的变化自动调整。 当然，我们也可以只设置其中之一，另一个属性将会自适应调整。以下是一些示例：

<img src="picture.png" width="200">   //只设置宽度，高度根据比例自适应
<img src="picture.png" height="150">  //只设置高度，宽度根据比例自适应

除了直接设置像素或百分比外，我们也可以使用CSS来设置图片的宽度和高度。在CSS中，我们使用width和height属性来控制图片的大小，其用法与HTML相同：

img {
    width: 200px;
    height: auto;
}

这条例子使用CSS设置图片的宽度为200像素，高度自适应。 总之，HTML中为图片设置宽度和高度是一项简单的任务，只需在标签中添加width和height属性即可。通过设置大小，我们可以控制图片在页面上的显示效果，为网页设计增添更多的可能性。