如果一个div的宽高是：100*100，图片的宽高是：50*500，那么如何才能让这个图片居中填满div？

最简便的方法，是通过写背景，然后cover。

并不是每个地方都适合写背景，有些地方还是img标签来的方便。纯css的解决方案并不好实现，可以通过js去计算并修改位置。如下：

给img添加data-autosize属性，并设置img的position属性
<img src="t.png" data-autosize>
默认会添加left，top来使图片居中，如果自己使用了css3的方式来居中，设置data-autosize="translate"，这样的话，将不设置样式。
<img src="t.png" data-autosize="translate">
尽量不要用css去设置img的height。可能会出现计算高度问题。
01.
02.
03.
04.
05.

下面使用css3居中。

有些情况，dom元素事先隐藏的，或者ajax请求过来的图片，这时候需要重新跑一遍js即可。

显示图片

btn.onclick = function(){
    //block
    xxx.show();
    autoImg('.wrap'); //可以指定某个区域的图片重新修改宽高
    //ajax
    $.ajax({
        success : function(){
            autoImg('.wrap')
        }
    });
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

点击这里下载JS