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

原创已于 2022-08-26 12:00:17 修改 · 669 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

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

本文介绍了如何使用CSS将图片在未知宽高的情况下居中显示，并确保图片不超过其容器（遮罩层）的范围，同时进行等比缩放。关键CSS属性包括`position: absolute`、`top: 50%`、`left: 50%`、`transform: translate(-50%, -50%)`以及`max-width: 100%`和`max-height: 100%`。这种方法适用于图片尺寸小于或大于遮罩层的情况。

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