純css3實現圖片等比例縮放+全屏居中

    在手邊的項目遇到了一點問題，須要從後臺拿取圖片外鏈再展現在前臺的詳情頁裏。可是外層容器的大小是固定的。而從外聯的圖片傳回來的確實大小不一橫豎不定的圖片。

參考了網上現成的解決方案作了修改後算是解決了這個問題。

解決代碼以下：由於這段代碼的測試圖片是一隻小貓，故給這段代碼的類名定爲：forcat（啊，我真是萌萌噠的女程序媛啊）

.forcat{
width: 100%;
height: 250px;
overflow: hidden;
background-image:url(); /*圖片地址*/
background-origin:content; /*從content區域開始顯示背景*/
background-position:50% 50%; /*圖片上下左右居中*/
background-size:cover; /*保持圖像自己的寬高比例，將圖片縮放到寬度或高度正好適應定義背景的區域*/
background-repeat:no-repeat; /*圖像不重複顯示*/
}

這裏有一點是background-size屬性設置爲：contain，和cover之間的區別。

上圖。

就是這隻貓貓啦。最開始拉過來的數據直接只能顯示貓貓的頭上一撮毛。就是由於圖片沒有辦法等比例縮放。

這是background-size屬性設置爲：contain時候的顯示結果。

下面是background-size屬性設置爲：cover的結果。完整看到貓貓了對不對。

附，ajax處理數據代碼。這裏面是沒有圖片的。是用背景實現的。

$.each(data.img,function(i){ $("div.am-slider ul").append( "<li class='forcat' style='background-image:url("+data.img[i].img+")'></li>" );