img固定宽高,怎么解决不同尺寸图片显示会变形的问题

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

父容器如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/








你可能感兴趣的:(前端工程师,img变形)