做網站的時候，經常會遇到因圖片寬高比率不一致導致圖片顯示方式有問題。
1、在圖片寬高未知的情況下，圖片上下左右居中
我以前的博客文章有寫過，就不再重復了。博客地址，效果預覽地址（歡迎copy）
上面的雖然沒問題，但是在圖片列表里，圖片上下左右不對齊，造成圖片列表排版很難看，產品要求寬高定死，也就是下面的第二種方法。
2、在圖片寬高未知的情況下，img標簽 寬高固定顯示（圖片會變形）
因為第二種方法，寬高定死，導致圖片變形了，反而不美。
產品說：我要圖片不失真，又能鋪滿呈正方形排列，就像朋友圈里的圖片，然后我打開朋友圈，看了朋友圈里的圖片顯示方式，然后有了下面的兩種寫法。
3.1、在圖片寬高未知的情況下，img標簽不固定，但父盒子固定，只顯示圖片中心部分，例如微信朋友圈列表的圖片（flex布局方式）
效果預覽圖
3.2、在圖片寬高未知的情況下，img標簽不固定，但父盒子固定，只顯示圖片中心部分，例如微信朋友圈列表的圖片（頁面結構簡單粗暴 ie8兼容版本）（朋友交流得到的ie8以下兼容版本）
效果預覽圖
微信朋友圈的圖片展現方式都有了，就順便多分享一種圖片預覽功能吧。
4、移動端圖片預覽功能（圖片預覽功能來自 yanghuiLu大神分享的github項目 https://github.com/yanghuiLu/previewImage-mobile）
首先在這里先謝謝yanghuiLu大神分享的圖片預覽功能，我根據他分享的項目，做出了一點更改。