一、根据图片实际宽高和需要显示的容器宽高等比例拉伸或缩小

父容器如div设置固定width和height,设置 overflow: hidden,设置相对定位;img设置绝对定位,设置最大宽度max-width:100%,left、top、right、bottom值为0,设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中,看起来又不会显得图片变形。


二、使用object-fit属性

参考:半深入理解CSS3 object-position/object-fit属性

http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/








Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐