css，元素/图片未知宽高，上下左右居中，且图片不超过外框/遮罩范围，最大宽高等比缩放

Shimeng_1989

已于 2022-08-26 12:00:17 修改

阅读量528

点赞数 1

文章标签： html 前端 css

于 2022-08-01 15:01:36 首次发布

本文链接：https://blog.csdn.net/shimeng_1989/article/details/126017444

版权

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%;//重点是这两行，限制最大宽度/高度，等比缩放
}