看到了精通css中关于图像的处理给出的三种处理方式，感觉很有趣，之前真的没有注意到这个问题！
图像的三种处理方法以及区别：
第一种：
对于需要跨越大的区域的图像，可以考虑直接利用在元素中添加背景图像的形式展现。
如下：
HTML布局：
<div id="branding"></div>
其样式：
1 #branding {2 ????????????height: 171px;3 ????????????background: url(../img/branding.png) no-repeat left top;4 ????????}细节：图片的整体宽高为：1600*171
分析：此时将图像设置成为div的背景形式，那么固然显示的效果是根据div的宽高而显示的，如果div的宽度小于图像原本的宽度，那么会产生右边的图像被“裁剪”掉。
第二种：
图像需要用作页面上的图像元素，也就是图像通过标签img嵌套在div中。
如下：
HTML布局为：
1 ?<div id="branding">2 ????<img src="../img/branding.png" width="1600" height="171" />
3 ?</div>
其样式为：
#branding { ???????????width:100%; ???????????overflow: hidden; ???????}细节：图像宽高同上；因此在这里可以不用在img标签中添加宽高属性，因为默认的就是图像本身的宽高。
分析：
这种方式处理图像的方式，无论怎样设置div宽高，图片显示的都是图片默认的宽高大小，如果想设置div大小从而让图片显示的与div大小一样，那么可以将div的overflow:hidden;此时，和第一种方式显示效果一样；如果此时，想将图像设置宽高，那么会有几种情况：1.只设置宽度/高度，那么图像高度/宽度也会等比例缩放，显示的效果时图像被压缩/放大，而与“裁剪”的效果不同；2.宽高都设置，会产生图像变形。
第三种：
图像随页面变化，产生自适应效果。此时注意的是不要设置图像父元素的宽高，并且利用设置百分比宽度的方式使得图像自适应。
如下：
HTML布局：
1 <div id="news"> 2 ????????<img src="../img/andy.jpg" /> 3 ????????<p>Westlife的故事要从位于爱尔兰西北部的小城Sligo说起，因为那是这个故事的主人公中Shane、Mark和Kian的家乡。 4 他们第一次的表演是12岁时在Sligo的Hawkswell剧院完成的，在那次演出中Shane扮演Danny，Kian扮演Kenickie，而Mark扮演Vince，于是，三个小伙子相识了，是上天注定了他们要在一起创造一件了不起的事情。 5 在Shane、Kian和Mark就读于Summerhill学院的时候，爱尔兰最出色的流行乐队当属Boyzone了，他们是一个以暗含忧郁的歌声迷倒了成千上万少男少女的组合，也是激发着Shane心中明星梦的源泉。他曾经想在大学毕业以后和同窗Mark、Micheal Garret一起组建一支叫SC4的四人乐队，并且他找到了Kian，可爱的金发男孩当时正在玩重金属，但是为了共同的理想他们还是走到了一起。 6 不久，来自同一学校的Derek Larey和Graham Keighron也加入了乐队，六个人在一起把名字改为I.O.U，并很快推出了由Shane和Mark共同谱写的第一首单曲，取名 "Together Girl Forever" ，虽然很不幸的，这也是I.O.U的最后一首单曲，但男孩们的理想却在他们努力的笔下越写越辉煌。 7 Shane Filan 专辑 8 Shane Filan 专辑(3张) 9 Shane的妈妈Mae Filan一直和Boyzone的经理Louise Walsh保持着联系，但是他当时正忙于Boyzone的繁杂事务，并没有签下这个I.O.U的打算，不过他们出色的表现却让经验丰富的Louise十分不舍。再三考虑之后，精明的Louise把I.O.U介绍给了Boyzone的主音Ronan Keating认识，并希望这位万人瞩目的音乐天使把I.O.U的小伙子们引上成功之路。在听了Shane他们唱了几首BSB的歌以后，Ronan的直觉告诉他，他们会是未来的明星。于是，他和Louise成了I.O.U的共同经纪人。也许是Shane、Mark和Kian太突出了，遮去了另外三成员全部的光芒，Louise告诉Shane，他只想签下他们三个人。关于感情和命运的抉择总是艰难的，面对着可能失去的友情，犹豫与痛苦是难免的，但是，倾听着未来的呼唤，人们不得不去学会去放弃一些东西，就算是为了更美丽的传奇故事吧。</p>10 </div>
PS：别太关注文本内容，是我最喜欢的westlife中的Shane
其样式：
1 ???????#news img{ 2 ????????????max-width:200px; 3 ????????????width: 25%; 4 ????????????float:left; 5 ????????????display:inline; 6 ????????????padding:2%; 7 ????????} 8 ?9 ????????#news p {10 ????????????width:68%;11 ????????????float:right;12 ????????????display:inline;13 ????????????padding:2% 2% 2% 0;14 ????????}注意：这里为何要设置max-width？
分析：利用的是流式布局的方式，将图片的的宽度设置百分比而不是固定宽度。设置max-width的原因是避免像素失真。此时的效果是，图像随着页面元素div的扩展以及收缩，图像和文本会随之扩展和收缩，从而保持视觉上的平衡。
本文是根据Andy大神的书总结的，目前也只遇到过这三种不同处理图像的方法！
关于图像的处理（借鉴于精通css）
原文地址：http://www.cnblogs.com/shanefe/p/7798238.html