html设置图片高度

　　Html中如果要设置图片的高度，我们有两种方法可以达到目的，下面由学习啦小编为大家整理了html设置图片高度的方法，希望对大家有帮助!

　　html设置图片高度

　　HTML中设置图片的长度和宽度有两种方法：HTML属性直接设置、css样式设置，现在一般设置样式都是使用css来设置。

　　设置图片高度方法一、HTML方法设置图片宽度高度

　　1、可以直接使用HTML的元素的属性来设置图片的宽高，代码如下：

　　<img src="test.jpg" height="200px">

　　2、同理也可以设置width属性，不建议同时设置防止图片变形。

　　设置图片高度方法二、css方法设置图片的宽度和高度

　　1、可使用css代码设置图片的宽高的代码如下：

　　<img src="test.jpg" style="width:200px;height:200px;">

　　补充：使用百分比值设置高度和宽度

　　使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此，如果要创建一个宽度与显示窗口宽度相同，高度为 30 个像素的彩色横条，可以这样实现：

　　<img src="/i/ct_1px.gif" width="60%" height="30px" />

　　当文档窗口的大小改变时，这个图像的大小也会随之改变

　　提示：如果提供了一个百分比形式的 width 值而忽略了 height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。

　　请看下面的 HTML：

　　<img src="/i/ct_1px.gif" width="20%" />

　　也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像(这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形)：