在手邊的項目遇到了一點問題，需要從后台拿取圖片外鏈再展示在前台的詳情頁里。但是外層容器的大小是固定的。而從外聯的圖片傳回來的確實大小不一橫豎不定的圖片。
參考了網上現成的解決方案做了修改后算是解決了這個問題。
解決代碼如下：因為這段代碼的測試圖片是一只小貓，故給這段代碼的類名定為：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>"
);