图片填满外层div 自适应不拉伸变形 |
您所在的位置:网站首页 › vscode背景图片拉伸 › 图片填满外层div 自适应不拉伸变形 |
#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 |