码迷,mamicode.com
首页 > Web开发 > 详细

关于图像的处理(借鉴于精通css)

时间:2017-11-07 12:19:27      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:大学   情况   经纪人   经验   lin   页面   不用   原因   oat   

    看到了精通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)

标签:大学   情况   经纪人   经验   lin   页面   不用   原因   oat   

原文地址:http://www.cnblogs.com/shanefe/p/7798238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!