Web前端-HeadFirst-笔记-图片-height width
来源:互联网 发布:淘宝店铺怎么取消推广 编辑:程序博客网 时间:2024/05/22 10:28
1. 属性 height width
1.1 按原比例显示时,最好加上高宽属性。
因为浏览器先显示文本后截取图片,当告知高宽时,浏览器可以提前布局,而不必收到图像后再进行更改。
此时属性为信息属性。符合html语言功用。
1.2 不按原比例缩放图片,最好不采用高宽属性。
此时属性为表现属性,表现属性最好使用CSS修改。
1.3 当图像过大时
一般浏览器会开启“auto image resize”,使得图片可以完整显示。浏览器的窗口值大约为800px。一般图像最大宽度设置为800px。logo宽度一般在100~200px之间。
weight height只能调整显示大小,而不能改变获取图片的大小,过大会需要传输的大量数据,浪费时间/流量资源。例如移动设备/流量设备,拨号上网/慢速链接用户。
1.4 像素,屏幕大小,分辨率,CSS像素
ppi:像素/英寸。经验:96 ppi 标准:72 ppi
CSS像素:1/96 ppi。
1.5 视障人士:
An img
element must have an alt
attribute, except under certain conditions.
alt 只有在图片损坏时显示文本 title 无论是否损坏都会提示图片内容
alt与title使用区别?
2. 原始图片大,处理方法
2.1原始图片过大
宽度超过800px时,事先调节为适合大小的图片再引用。
2.2使用缩略图显示,当点击在转入大图片时。
小技巧:
【1】使用不同的文件夹保存,则可以在引用时只修改路径而不改变名字。【2】缩略图,最好是统一规格的大小。当图片原始比例不一致,或者长款颠倒时,可以用裁剪符合大小要求的部分画面代替缩小图片。
【3】图片单独保存为html页面,且这些html页面另存为一个新的文件夹。
阅读全文
0 0
- Web前端-HeadFirst-笔记-图片-height width
- 图片缩小(width height)
- Web前端-HeadFirst-笔记-html规范
- Web前端-HeadFirst笔记-CH9 盒模型
- Web前端-HeadFirst-笔记-CH10-子孙选择器
- Web前端-HeadFirst-笔记-Ch11-三布局
- Web前端-HeadFirst笔记-CH11-定位
- Web前端-HeadFirst-笔记-Ch14-表单
- Web前端-HeadFirst笔记-CH9-多个样式表-media
- Web前端-HeadFirst笔记-CH9-Class与id
- Web前端-HeadFirst笔记-CH10 span div 伪类
- Web前端-HeadFirst-笔记-Ch10-层叠与特定性计算
- Web前端-HeadFirst-笔记-CH10-简写vs长形式
- Web前端-HeadFirst-笔记-Ch11-流,float,分栏
- Web前端-HeadFirst笔记-Ch12-HTML5新标记
- Web前端-HeadFirst-笔记-Ch12-h5的视频实现
- Web前端-HeadFirst-笔记-Ch13-表格与列表
- C# 改变图片width height dpi 方法
- angularjs自定义过滤器
- accept() 产生的Socekt端口是多少?
- Java+Selenium3方法篇19-获取浏览器窗体的句柄
- Effective Java-嵌套类(内部类)
- 二叉排序树实现符号表
- Web前端-HeadFirst-笔记-图片-height width
- Python3.5 第三方库安装总结
- HihoCoder-1050 【裸树的直径】
- C++拷贝控制
- CentOS 7虚拟机安装Oracle11g详解
- 选数
- 以太网原理 最大帧长 最小帧长
- C++学习:虚函数,纯虚函数(virtual),虚继承,虚析构函数
- 计算机启动过程