做开发时，遇到一个问题。
在程序中有一个扫码模块，不同的二维码扫完会展示不同的图片，图片的长宽比例都不一样，但是展示的盒子的大小是一定的。那么，对于过长或者过宽的图片，显示过程中可能会溢出，或者产生滚动条，又或者显示不全。这个就看自己的css怎么写了。
那么，如何能同时兼容这种过宽或者过高的图片呢。
首先给乘图片的父盒子一个固定的宽和高，设置 overflow: hidden，设置相对定位;然后给自己的img设置成绝对定位，设置最大宽度max-width:100%，left、top、right、bottom值为0，设置margin:auto。
这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中，看起来又不会显得图片变形。
原理：
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
绝对定位元素的自动伸缩的特性来实现垂直水平居中，设置margin:auto;设置left和right的值相等,top和bottom的值相等,
注意：left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。
width: 100%是将所有指定元素的宽度拉伸或收缩到和父元素的宽度一致，
而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度，
则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。
也可以考虑使用object-fit 属性
https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
