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

您所在的位置:网站首页 vscode背景图片拉伸 图片填满外层div 自适应不拉伸变形

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

2024-07-11 17:35| 来源: 网络整理| 查看: 265

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

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

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

.photo-box{ display: table-cell; text-align: center; vertical-align: middle; overflow: hidden; width: 88px; height: 120px; } .photo-box img{ min-width: 88px; height: auto; }

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

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

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

Vue:

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3