console
window.onload=function(){
(function () {
var obj = $(".pic") ;
var picw = obj.width();
var pich = obj.height();
var pic = $(".pic").each(function (i, el) {
var w = $(el).find("img").width();
var h = $(el).find("img").height();
var p1 = w / h;
var p2 = picw / pich;
if (p1 <= p2) {
$(el).find("img").width(picw);
var nowh = $(el).find("img").height();
$(el).find("img").css("marginTop", -(nowh - pich) / 2)
}
else {
$(el).find("img").height(pich);
var noww = $(el).find("img").width();
$(el).find("img").css("marginLeft", -(noww - picw) / 2)
}
})
var obj2 = $(".pic2") ;
var picw2 = obj2.width();
var pich2 = obj2.height();
var pic2 = $(".pic2").each(function (i, el) {
var w2 = $(el).find("img").width();
var h2 = $(el).find("img").height();
var p12 = w2 / h2;
var p22 = picw2 / pich2;
if (p12 <= p22) {
$(el).find("img").height(pich2);
var noww2 = $(el).find("img").width();
$(el).find("img").css("marginLeft", ( picw2-noww2) / 2)
}
else {
$(el).find("img").width(picw2);
var nowh2 = $(el).find("img").height();
$(el).find("img").css("marginTop", ( pich2-nowh2) / 2)
}
})
})()
}
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
第一种:图片填满容器等比居中显示
<div class="pic s" imgc>
<img src="http://www.fzlol.com/upimg/allimg/080811/2134230KQ.gif" alt="" imgc>
</div>
<div class="pic" imgc>
<img src="http://www.fzlol.com/upimg/allimg/080811/213423095G1.gif" alt="" imgc>
</div>
<div class="pic" imgc>
<img src="http://p3.so.qhimg.com/t01ed3a0c339a1d2d5d.gif" alt="" imgc>
</div>
<div class="pic" imgc>
<img src="http://www.fzlol.com/upimg/allimg/080811/21342302555.gif" alt="" imgc>
</div>
<div class="pic" imgc>
<img src="http://www.qqttxx.com/upimg/allimg/110625/0102354923-2.jpg" alt="" imgc>
</div>
<div class="pic" imgc>
<img src="http://photo.loveyd.com/uploads/allimg/080703/10164740.gif" alt="" imgc>
</div>
第二种:图片居中显示在容器内
<div class="pic2 s" imgc>
<img src="http://www.qqkjxw.cn/uploads/allimg/110529/100I410T-3.jpg" alt="" imgc>
</div>
<div class="pic2" imgc>
<img src="http://www.qqpk.cn/article/uploadfiles/201112/20111226144743900.jpg" alt="" imgc>
</div>
<div class="pic2">
<img src="http://www.fzlol.com/upimg/allimg/080811/21342301X3.gif" alt="" imgc>
</div>
<div class="pic2">
<img src="http://www.fzlol.com/upimg/allimg/080811/213423091019.gif" alt="" imgc>
</div>
<div class="pic2">
<img src="http://www.doershow.com/uploads/allimg/110212/13533m421-10.jpg" alt="" imgc>
</div>
<div class="pic2">
<img src="http://www.qqttxx.com/upimg/allimg/110625/010235LA-4.jpg" alt="" imgc>
</div>
.pic, .pic2 {
height: 100px;
width: 200px;
background: #eee;
border: 1px solid #ddd;
overflow: hidden;
}