移动端web页面图片呈现方式

移动端web页面，涉及到图片，都是需要去考虑图片的适配的，一般原则是定宽不定高，定高不定宽，图片按照一个规则来，要么按高度100%，宽度自适应。要么宽度100%，高度自适应.

实际操作中，直接设置如下样式，基本可以解决图片变形的问题

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

更进一步，如果需要图片在某个区域垂直居中显示并且不产生形变问题并且图片是整张完全显示的话，建议使用定位,代码如下

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
max-width: 100%;
max-height: 100%;
line-height: 100%;

当然，在整个适配过程中，还是需要灵活使用auto与100%这两个值的