公司有在做一个类似qq空间的开发，发表说说避免不了的要有图片展示。
产品提出的空间缩略图的展示类似*信朋友圈那种效果——图片不变形、能看到中间部分。
这里给出3种解决方案(jsbin地址失效时可复制代码到jsbin.com看效果）：
1、 img + position + translate
JS Bin
/* 300*235 */
/* 1200*320 */
/* 1000*1000 */
jsbin地址：https://jsbin.com/dakenupoqu/edit?html,output
可以看出，img和img_out大小差不多时显示符合要求，但img像素过大时，看到的缩略图就有点“管中窥豹”了...所以这种方案慎用！
2、background-imae + background-size + background-center
background-imae+background-size+background-center
/* 300*235 */
/* 1200*320 */
/* 1000*1000 */
jsbin地址：https://jsbin.com/xamowokaki/edit?html,output
对比第一种方案，img和img_out只要比例差不多时显示就符合要求，不要求图片大小和显示区域大小差不多。但img像素过大，同时比例差太多时，看到的缩略图也会出现“管中窥豹”的现象。
这种方案算是最完美的实现了，但如果你有语义化强迫症，觉得缩略图属于内容，一定要用img标签，那就推荐第三种实现方式：
3、object-fit
JS Bin
/* 300*235 */
/* 1200*320 */
/* 1000*1000 */
jsbin地址：https://jsbin.com/vulumexabo/edit?html,output
这种方案兼容性不是很好，效果类似第二种方案。
不知道object-fit是啥？链接送上：https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
兼容参考：https://blog.csdn.net/bigbear00007/article/details/80103109
最后补充一点，当图片的比例和规范相差很大时，是没有办法实现这2点需求的。所以，在作图时要注意了！https://www.cnblogs.com/chenwenhao/p/9900372.html
