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