img固定宽高,怎么解决不同尺寸图片显示会变形的问题
一、父容器如div设置固定width和height,设置相对定位;img设置绝对定位,设置最大宽度max-width:100%,left、top、right、bottom值为0,设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中,看起来又不会显得图片变形。...
·
一、根据图片实际宽高和需要显示的容器宽高等比例拉伸或缩小
父容器如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/
更多推荐
已为社区贡献1条内容
所有评论(0)