css未知宽高,上下左右居中,且图片不超过div范围,最大宽高等比缩放
以下两种情况:
- 图片宽/高 < 遮罩层(灰色背景),即在遮罩范围内:按原尺寸图上下左右居中。如:(图一)
- 图片宽/高 > 遮罩层(灰色背景),即超过遮罩(宽/高)范围:图片等比缩放,上下/左右居中。如:(图二)、(图三)
(图一) (图二) (图三)
实现:
html:
<div class="mask" >
<img :src="previewUrl" class="center_and_middle">
</div>
css:
// 遮罩
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10000;
}
// 未知高度 上下左右居中
.center_and_middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;//重点是这两行,限制最大宽度/高度,等比缩放
max-height: 100%;//重点是这两行,限制最大宽度/高度,等比缩放
}