详解 height 和 width 属性
为什么要使用 height 和 width 属性
您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小,然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局,以便把图像插入到显示当中。这同时也告诉我们,图像是独立的文件,它与源文件都分别是独立加载的。
但是这不是一种最有效的显示文档的方法,因为浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。
对于创作者来说,一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。这两个属性都要求是整数值,并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。
height 和 width 属性的问题
虽然 <img> 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧,但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能,浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架,里面有一个毫无意义的图标,表示这是放置图像的位置。这时页面将看上去非常糟糕,就像根本没有完成一样,并且大部分内容都毫无用处。如果不用这些指定的尺寸,则浏览器将只是在文本中放置一个图像图标,这样显示中至少还有一些文字可以阅读。
对于这个问题我们还没有解决方案,只能强调一点,就是去使用 alt 属性和一些描述性文字,这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性,因为我们鼓励一切能够改善网络性能的行为。
转载于:https://www.cnblogs.com/bigdesign/p/4386488.html
详解 height 和 width 属性相关推荐
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- html里position属性,科技常识:详解html中 position属性用法(四种)
今天小编跟大家讲解下有关详解html中 position属性用法(四种) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关详解html中 position属性用法(四种) 的相关资料,希望小 ...
- java中的cascade,详解Hibernate cascade级联属性的CascadeType的用法
详解hibernate cascade级联属性的cascadetype的用法 cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若 ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- 十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状 移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
- 相对布局父类属性_Unity3D RectTransform使用详解:布局、属性、方法
主要内容 布局: Anchors,Pivot,Anchor Presets 属性: anchoredPosition,anchoredPosition3D,offsetMax,offsetMin,si ...
- 详解CSS——display各个属性值(带例子)
文章目录 display属性的支持情况 display属性的作用 display属性值 默认值 inline none block inline-block list-item run-in tabl ...
- css详解position五种属性用法及其含义
position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...
- fillcolor是什么意思_详解css3中 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是"文本填充颜色",不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill- ...
最新文章
- ${pageContext.request.contextPath} JSP取得绝对路径
- 数据结构与算法:15 树
- 嬴彻与东风商用车完成L3重卡A样车验收,加速自动驾驶产品化
- python中requests库的用途-python中requests.session的妙用
- 使用Hibernate 4,JPA和Maven的架构创建脚本
- UI测试常见BUG汇总
- PHP intval() 函数
- 解决moss的log文件不断变大的办法
- 2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) B - Enlarging Enthusiasm dp好题
- centos转换linux格式,CentOS 下转换网易云音乐ncm格式为mp3
- Windows历史版本
- File和IO流应用,剪切文件夹
- 有一根27厘米的细木杆java_[转载]推荐最近看过的最好的java视频
- 中继器、集线器、网桥、交换机、路由器、网关的超全总结
- 5G技术即将到来,5G网络的基本特点和应用你了解了多少
- 图论 —— 染色法判断二分图
- 滴滴云千万补贴,助力中小企业数字化转型
- 解决移动硬盘可以识别,但不显示盘符的问题
- 高德定位注册Key的问题
- python-迭代器_高阶函数
热门文章
- ASP.NET 2.0中的Session状态丢失的解决办法
- 清华大学出品:罚梯度范数提高深度学习模型泛化性
- GitHub 5.9K,目标检测、跟踪、关键点全覆盖的年度开源项目来了!
- 谷歌AI发布Deepfake检测数据集,真人多场景拍摄,生成3000段假视频
- 遥感影像场景分类预测大赛——算法硬碰硬!
- CVPR 2019 | Stereo R-CNN 3D 目标检测
- 是时候学习生成对抗网络了,李宏毅老师GAN视频教程下载
- scheduling java_JAVA定时任务实现的几种方式
- 收藏 | Transformers资料汇总!从原理到应用
- 太棒了!PyTorch 1.7发布,支持CUDA 11、Windows分布式训练