图片自动缩放、垂直居中在pc端和移动端的解决方法
首先来说说图片自动缩放。为什么要自动缩放？原因很现实：
1、用户不可能每张图片都经过精心的修剪；
2、有的时候图片的列表页面和详细介绍页面是共用一张大图片，明显，在列表页图片是需要等比缩放为列表可容纳的大小的。
自动缩放听起来很高端，其实很简单，只需要给图片的父元素设置了高宽度（可以是具体值也可以是百分比），然后再给图片添加“max-width:100%; max-height:100%”属性，浏览器会为我们做其他的幕后工作。
至于图片垂直居中，网上有很多对此问题的讲述，此处就不一一说明。这里只说说“display:table-cell"这个方法的弊端。如果不清楚这个方法的，请参看“http://jingyan.baidu.com/article/c33e3f48a3615dea15cbb512.html”
"display:table-cell”方法的实现原理是让元素表现为table-cell模拟表格实现居中，因此也带来了和表格一样的问题：自动扩充的问题。当图片小于table高宽度的时候可以很完美的实现居中，但是当图片大于表格的高宽度的时候就会撑开table使table变形。那么，上面不是有了图片自动缩放的办法了么？好的，我们在此实验一下（图片尺寸：590*368）：
<table cellpadding="0" cellspacing="0" style="margin:50px auto;"> <tr> <td align="center" style="width:200px; height:200px; border:1px solid #000;"><img src="images/1.jpg" style="max-height:100%; max-width:100%;" /></td> </tr> </table>
ie7和谷歌:
嗯，很完美，但是看看其他的呢？
ie7+和火狐：
？？图片的max-width：100%失效了！真是伤心啊。
看到这个事实，真是让人丧气啊，不过其实就算是可以实现max-width，我还是不会采用这种方法。因为display:table-cell的办法每次都需要计算font-size的值，而且这个计算出的值还是存在误差的，图片越大误差越大，另外这个方法要求图片的父元素不能浮动，额~~这个实在是太致命了。另外直接使用table标签的话，浮动自然是可以的了，但是我们需要多了几层嵌套——table-tbody-tr-td-img，我仅仅是要做个居中啊~~~
好了，下面介绍的两个方法是我在工作中采用的两个方法（也是个人对比过其他一些方法之后选择的兼容性和易写性比较好的办法）。
首先说说在pc端的图片居中办法。这个办法的中心思路是利用inline-block元素的"vertical-align:middle"属性来实现垂直居中。大家都知道行内块元素"vertical-align:middle"之后，会自动和行内高度最高的兄弟元素实现居中对齐，展示如下。
html:
<ul class="ul"> <li style="background:#fc0; height:100px;"></li> <li style="background:#f00; height:80px;"></li> <li style="background:#666; height:50px;"></li> </ul>
css:
ul{list-style:none;}
ul,li{padding:0; margin:0;}
.ul{margin:50px auto; border:1px solid #000; height:200px; width:200px; text-align:center;}
.ul li{display:inline-block; *display:inline; *zoom:1; vertical-align:middle; width:50px; margin:0 5px;}
这里是对 li 标签“inline-block”化，由于ie7不支持这个属性，因此需要先“inline”化之后再使用“zoom:1”激活ie7的haslayout
展示：
那么根据这个实验，我们是不是可以做出这样的一个设想呢——当最高的“li”高度等于“ul”高度的话，剩下那两个“li”是不是就相当于是在“ul”里面垂直居中了呢：
是的，我们的猜测是正确的！
好了，讲了那么多，我们就看下最终要实现的效果吧：
html：
<div class="lstimg"> <img src="images/1.jpg" /><i></i> </div>
注意：“i”标签和“img”之间不要换行也不要留下空格，不然会在浏览器内解读成4px的空格的哦~~，关于行内元素或者行内块元素之间空格的解读这点浏览器倒是比较统一 ╮(╯_╰)╭
css:
div{height:200px; width:200px; border:1px solid #000; margin:50px auto; padding:0;}
img{border:none;}
/*主要样式*/
.lstimg{text-align:center;}
.lstimg img{vertical-align:middle; max-height:100%; max-width:100%;}
.lstimg i{display:inline-block; height:100%; vertical-align:middle;}
效果：
这个方法也有一个弊端：需要一个空的“i”标签（当然，你可以将“i”标签换成其他任意的行内标签，不要换成块级标签，不然又要苦逼的写一遍针对ie7的hack了），这个空标签本可以使用“：before”或者“：after”伪元素来解决，但是ie7人家不支持哇！如果说你不需要兼容ie7的话，那么或许下一个方法对你来说好哦。
个人推荐在移动端使用另一种居中办法，（终于离开ie7、8了）。由于这个方法理实践起来没什么难度，在此只贴出相关代码：
html：
<div class="lstimg"> <img src="images/1.jpg" /> </div>
css:
div{height:200px; width:200px; border:1px solid #000; margin:50px auto; padding:0;}
img{border:none;}
/*主要样式*/
.lstimg{position:relative;}
.lstimg img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; max-height:100%; max-width:100%;}
效果跟之前的是一样的，在此不重复贴图。
说点题外话，之前我是一直在使用display：table-cell或者表格做图片居中的，因为程序会替我们做图片的缩放，因此我也从来没考虑过替换这种方法，虽然它很麻烦。直到我做到手机站的时候，我发现这种模拟表格或者直接用表格的方法根本无法实现我要做的流动式的布局（图片跟随浏览器宽度的改变，自动等比拉伸或者缩小，但是一直保持垂直居中），只能利用响应式为图片的父元素固定几个大小，这样做出来的效果不是很平滑，在改变浏览器宽度的时候会明显感觉到跳动感，因此才决定找出解决该问题的办法，在搜阅资料的同时也顺便解决了pc端图片居中问题，也算是意外之喜~~这个事情让我也思考了一些事：总是在被逼无奈的情况下才想着去改进，这是不行的，前端这个行业技术更新很快，需要我们更主动的去更新自己的技术；对于现有的方法不能沉迷，从来如此不一定是错的，但是也不一定是好的。