如何用CSS设置图片的max-width和max-height并实现正确等比缩放？

要让图片始终不超出270px宽和530px高的限制，同时保持原宽高比，有两种简单可靠的实现方式：

方式一：直接设置图片样式 #

给图片元素添加以下CSS样式，浏览器会自动选择最小的缩放比例适配限制，不会超出任一维度：

img {
  max-width: 270px;
  max-height: 530px;
  width: auto;
  height: auto;
}

• 逻辑：width: auto和height: auto确保图片保持原比例，max-width与max-height限定最大尺寸，浏览器会自动计算同时满足两个限制的缩放值——你的长图会先触达max-height:530px，宽图会先触达max-width:270px，最终图片尺寸始终在限制范围内。

方式二：容器配合object-fit（适合固定占位场景） #

如果需要图片占据固定的270px×530px区域，同时图片按比例居中显示不超出边界，可用容器包裹图片：

.image-wrapper {
  width: 270px;
  height: 530px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

• 逻辑：容器固定宽高，object-fit: contain让图片在容器内按比例缩放，完整显示且不超出容器边界，空白区域留空（不会拉伸或裁剪图片）。

效果验证 #

• 对于335px×891px的长图：两种方式都会将其缩至≈200px×530px，刚好触达高度限制，宽度自动适配比例。
• 对于1000px×600px的宽图：两种方式都会将其缩至270px×≈162px，刚好触达宽度限制，高度自动适配比例。

内容的提问来源于stack exchange，提问作者CheeseFlavored