html图片自适应大小(html图片调节大小)

　　* 作者：阮臻

　　* 链接：https://rdc.hundsun.com/portal/article/701.html

　　*本文建议阅读6分钟，保持学习哟~

　　当一个项目产品需要制作时,大概流程可以分为3个阶段：原型需求分析期、切图期、动画交互期。这三个时期都需要会什么呢？看本文达妹为你解答。

　　随着前端技术的不断演变进化，很多东西名字没变，但本质早已今非昔比。“切图”就是其中之一吧。早期“切图”是非常形象的比喻，就是用PS把设计稿图切成一块一块，再用编辑器拼在一起，然后直接导出（那时候叫网页制作无可厚非）。

　　现在的“切图”是一种思路。看到设计稿，设计师脑子里会迅速形成“切图”思路，哪些平铺、哪些用纯css实现，哪些用png24，哪些合并, UI的层次是怎样的, 模板怎么组织...... 这是现在的“切图”方式，也是前端工程师必备的最基本能力。

　　当一个项目产品需要制作时,大概流程可以分为3个阶段：原型需求分析期、切图期、动画交互期。

　　01

　　原型需求分析期

　　在确定产品的功能后，项目组需要在设计前组织一次需求会议，为前端工程师、后端工程师、产品设计师做一下产品讲解， 然后各方各自评估下，提出疑难点。

　　举个例子

　　一个功能会涉及到类似淘宝类似的配送地址，要求可以作为搜索条件，这个就会涉及到前端的展示，储存（编辑时初始化）效果，和数据结构，而后端可能会涉及到数据库的储存方式，查询方式，从这个功能都可以提出自己的方案，最终合并为最终方案，要求解决前/后端问题，且要达到产品的需求，尽可能地降低开发成本，加快开发速度！

　　拿到确定好的效果图后，接下来就是要对整体的观察，确定大致的dom结构，原则上遵循从上到下，从左到右，从外到里的顺序。然后思考布局方式，主流方式有浮动（float）、定位（position）、flex。

　　其中flex是一个非常好的css3布局，但是在移动端很多浏览器不支持display: flex，仅支持display: -webkit-box，所以为了兼容写了三种语法：

　　? display: -webkit-box;

　　? display: -webkit-flex;

　　? display: flex;

　　就能保证兼容移动端各种主流浏览器，微信端和webview上完美运行。

　　02

　　切图期

　　一. css重置样式

　　切图前的准备工作，首先是切图前要熟悉公司的重置样式、公用样式、公用库等，因为这样可以使你少写代码。由于不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果，最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

　　例如

　　对常用标签的样式进行重置：

　　▲重置样式按属性可以分为物理性css和功能性css。

　　物理性css包含了宽高、字体、颜色、边距等常规通用属性样式。

　　功能性css类似于js的模块化，可以多场景复用的样式。

　　例如

　　二. 命名书写规范

　　CSS书写规范使用CSS缩写属性：比如padding,margin,font等，按照上、右、下、左顺时针顺序书写。这样精简代码同时又能提高用户的阅读体验。

　　三.CSS命名规范

　　1. 语义化：“help-guest-regist” 就是 “帮助-顾客-注册”

　　*出现率高的做成基类+扩展类 ：class="m-list m-list-1” class="u-btn u-btn-hover”

　　*相同语义的不同类命名 —可直接加数字或字母区分 .m-list-1.m-list-2

　　2. 长名称或词组可以使用中横线来为选择器命名

　　3. 不建议使用“_”下划线来命名CSS选择器

　　*比如使用_tips的选择器命名，在IE6是无效的

　　*能良好区分Java变量命名(JS变量命名是用“_”)

　　四.切图质量标准

　　切图质量的好坏可以从如下几个方面来判断：

　　? 业务角度：制作完的HTML网页还原度高，甚至做到像素级还原；

　　? 技术角度：图片体积小（减少网络传输）、图片数量少（减少请求数量）；

　　? 配合角度：便于后续制作HTML，特别是制作自适应屏幕的网页。

　　一般来说，图片总是比字符形式的HTML/CSS体积大，因此总体原则是能用HTML/CSS实现的就不切图。

　　常见的比如：

　　1.纯色背景色：用CSS2的background-color来实现；

　　2.渐变背景色：用background-image配合CSS3的渐变属性（线性渐变linear-gradient、径向渐变radial-gradient）来实现；

　　3.边框颜色：用CSS2的border-color来实现，另外边框线型可以用border-style实现，如果边框颜色特别花哨甚至有精妙的图案，那就只能用图片加border-image来实现；

　　4.背景投影/阴影：用CSS3的box-shadow实现，可以实现不同样式颜色的阴影；

　　5.椭圆等不规则图形：这个难度相对较大，用CSS3的圆角（border-radius）、变换（transform）来实现，当然我个人对于一些图标喜欢用SVG来做，SVG的语法和CSS、HTML极其类似，入门学习（点击直达）https://w3school.com.cn/svg一小时左右即可。

　　五.图片格式的选择

　　常见的网络图片格式有：JPG/JPEG、GIF、PNG、SVG，对于这些图片格式的比较如下表（每种格式不考虑同种格式版本的差异）：

　　以下是自身从实践中总结的几个要点：

　　1.logo统一切成png透明度的。

　　2.一般情况下临时图、ad、banner图用jpg格式，色彩丰富的、大图切成jpg。

　　3.在保证图片的画质情况下，图片的大小越小越好。

　　4.颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24。

　　5.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的。

　　（IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）

　　6.PS中裁剪完成后ctrl+shift+alt+s 进行保存为web可用格式。

　　7.一般来说SVG格式的体积最小，但是IE仅IE9及以上原生支持。

　　上述原则有时候不能一概而论，经常需要把图片存成多种格式、多种颜色位数进行实际比较，在色彩和体积之间找到一个平衡点，其中每张图片尽量不要大于100kB。

　　六.css雪碧图

　　从网页体积来看，切图必然是切得小一些更好，比如能切1像素宽然后repeat的，就不要切出一长条。重复的图形能切一个循环，就不要切n个循环。图片越小，存储量越小，对网络的负担也相应会小。

　　但是如果一堆小图片在一个网页中加载，会产生大量的HTTP请求，从而拖慢网页加载速度，这时候就需要考虑把小图片合并为大图片，只进行一次加载，可以有效的减少http请求数量，加速内容显示，从而提高效率。

　　所谓css sprite，就是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位（background-position：x定位点 y定位点）到要显示的位置，因此也叫“图片拼合”技术。

　　如：.div{ background:url(abc.jpg) no-repeat -30px -50px;}。

　　具体怎么切，其实还需要看网页布局，因此切图和HTML静态页面制作不能割裂开来，否则切但的图和静态页面不在一个频道上，会导致返工。

　　在此推荐一款工具自动生成sprite：TexturePackerGUI，可以快速拼合出雪碧图，并且生成出对应css，使用非常方便。

　　03

　　动画交互期

　　高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，总结为以下几点：流量、功耗与流畅度。

　　在PC时代我们更多的是考虑体验上的流畅度，而在移动端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

　　关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。

　　而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。

　　▲CSS3中的三种动画:

　　1.tranform形变动画：2d转换。

　　2.transition缓动动画：property duration timing-function delay（css过渡，使变化以渐变形式呈现）。

　　3.animation逐帧动画：KeyframesName duration timing-function delay iteration-count direction play-state fill-mode（引用关键帧，并设计动画时间，@keyframes：css动画关键帧为动画设计过渡画面）。

　　要对一个dom进行2d转换，比如放大缩小、平移、旋转，就可以使用transform属性，transform可以设置的变形有：scale（放大缩小）,translate（平移）,rotate（旋转）,skew（斜切，即扭转）,matrix（以像素精度控制变形效果）。

　　例如

　　div { transform:scale(2,4) translate(20px,20px) rotate(30deg); }

　　要对一个变形进行过度渐变处理，就可以使用transition属性。transition属性声称任何css属性都可以过度处理（过度对象设置为all），但实际引用中需要测试。例如对上例的变形进行过度处理：div{ transition:transform 2s; }

　　▲transition的优点在于简单易用，但是它有几个很大的局限:

　　1.transition需要事件触发，所以没法在网页加载时自动发生。

　　2.transition是一次性的，不能重复发生，除非一再触发。

　　3.transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

　　4.一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

　　所以，CSS Animation就是为了解决这些问题而提出的，结合关键帧@keyframes和animation属性，

　　例如

　　div{ animation:myfirst 2s;}

　　@keyframes myfirst{

　　0%{background:red;}

　　50%{background:blue;}

　　100%{background:yellow;}

　　}

　　在此推荐一款强大的预设css3动画库：Animate.css。内置预设了丰富的css3动画效果，使用引入也非常方便，可以基本满足日常需求并且快速制作出理想的动效。

　　完成以上3个阶段的工作，整个切图的骨架基本思路就已经完成啦，剩下的就是在实践过程中不断的添砖加瓦，结合项目的具体需求，搭建起前端开发的坚实地基吧！如果你也想成为月入过万的web前端工程师，点击阅读原文赶快报名达内web前端免费训练营~

　　达内web前端免费训练营：专为零基础、跨行人员设置的HTML基础、CSS基础、Java基础，特别适合意图在互联网时代，通过掌握技术快速实现自己高薪梦想的学员，如果你也想加入高薪一族，点击“阅读原文”报名达内2017年4月份免费课程~，就有机会获得达内精品免费在线学习（TMOOC.CN）会员卡哦~名额有限，先报先得！给自己一个接触互联网高薪技术的机会。

　　达内上市集团

　　40万学员的共同选择

　　QQ咨询：2421473554