想要实现的效果：
1、父盒子固定宽高
2、父盒子里的图片，宽度比高度大，那么宽度铺满，高度上下自适应居中。
3、父盒子里的图片，高度比宽度大，那么高度铺满，宽度左右自适应居中。
效果图：
准备贴代码，代码里的图片是我随便找的图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; display: table-cell; vertical-align: middle; background:red; text-align: center; } .box img, .box2 img{ max-width: 100%; max-height: 100%; vertical-align: middle; } .box2{ width: 100px; height: 170px; display: table-cell; vertical-align: middle; background:red; text-align: center; } </style> </head> <body> <div class="box"> <img src="http://img.zhefengle.com/1224e904cd3d0a637ff4c12c487178b2.jpg?imageView2/2/w/300/interlace/1/q/93/format/jpeg" alt=""> </div> <br> <br> <br> <div class="box2"> <img src="http://img.zhefengle.com/98382fb3d59547c49f8157848d1e1a33.jpg?imageView2/2/w/300/interlace/1/q/93/format/jpeg" alt=""> </div> </body> </html>