当前位置:网站首页 > 技术博客 > 正文

html中img标签的作用



height 和 width 属性有一种隐藏的特性,就是人们无需指定图像的实际大小,也就是说,这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像,使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图,以及放大很小的图像。但需要注意的是:浏览器还是必须要下载整个文件,不管它最终显示的尺寸到底是多大,而且,如果没有保持其原来的宽度和高度比例,图像会发生扭曲。

使用 height 和 width 属性的另外一种技巧,是可以非常容易地实现对页面区域的填充,同时还可以改善文档的性能。设想一下,如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像,相反,您只要创建一个宽度和高度都为 1 个像素的图像,并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。

这是上面这段 HTML 的效果,这个颜色彩条是用只有一个像素的图像制成的:

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

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

请看下面的 HTML:

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

版权声明


相关文章:

  • qml入门教程详细讲解版2024-11-29 12:00:59
  • 霍夫圆检测算法2024-11-29 12:00:59
  • 内存检测工具memtest结果2024-11-29 12:00:59
  • java线程方法介绍2024-11-29 12:00:59
  • fastjson教程2024-11-29 12:00:59
  • python做预测模型2024-11-29 12:00:59
  • 计算机专业简历介绍2024-11-29 12:00:59
  • 爬虫中的url是什么2024-11-29 12:00:59
  • offsetof函数用法2024-11-29 12:00:59
  • c++结构体简单例子2024-11-29 12:00:59