SOURCE

console 命令行工具 X clear

                    
>
console
window.onload=function(){
//注意:必须使用window.onload
//第一种图片的父级class必须是pic
//第二种父级class必须是pic2
//加个父级和class的原因是,不加有潜在的问题

        (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;
        }