图片填满外层div 自适应不拉伸变形

ymumi的博客 - CSDN博客

#max-width:100%   相对于img本身的尺寸而言,最大的宽度为自身宽度

#width:100% 相对于父级宽度的

1.等比例缩小垂直居中:按宽度等比列缩放   或者可以选择按高度等比缩放

2.图片自适应问题(填满容器不拉伸)  object-fit:    不兼容    IE浏览器

图片截取中间部分显示,超出边框部分隐藏,最后效果:有部分图片被截取,可能导致图片显示不全问题

3.利用背景图片效果(填满容器不拉伸,效果与2类似)

Vue:

<div class="photo-bg" id="head-portrait" :style="{backgroundImage: 'url(' + vo.headPortrait + ')' }" >

.photo-bg{
width:100%;
height:100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

本文由 黑白世界4648 第一时间收藏到GET,原文来自 → blog.csdn.net

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入