如何实现图片完全展示且不变形？

html代码:

<div><img src=".test.png" /></div>

思路：

如果直接写死图片的长宽，那么图片有可能变形。所以，可以通过设置外层div的长宽，再设置内层图片的,maxwidth，maxheight属性，就可以让图片根据自身的长宽比去进行缩放，如果高度不够，则居中展示

div{

width:100px;height:100px;display:table-cell;vertical-align:middle;

}

img{

max-width:100%;max-height:100%;

}