CSS实现图片在固定尺寸div中自动适配：居中且保持比例

嘿，这个场景我太熟悉了！你当前的问题出在给图片固定了height: 600px，而width:auto会按照图片原始比例放大/缩小，导致宽度直接超过容器的300px。下面给你几个实用的解决方案，都能完美实现需求：

方案1：Flex布局（最简便推荐） #

直接把容器改成flex容器，利用flex的居中属性，同时限制图片的最大宽高不超出容器范围，这样图片会自动保持比例并居中：

.image-preview {
  height: 600px;
  width: 50%; /* 实际对应300px */
  border: 1px solid red;
  /* 添加flex相关属性 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

.image {
  max-width: 100%; /* 限制图片宽度不超过容器 */
  max-height: 100%; /* 限制图片高度不超过容器 */
  width: auto;
  height: auto; /* 去掉固定height，让浏览器自动按比例计算尺寸 */
}

解释：flex容器会自动把内部的图片定位到中心，max-width和max-height确保图片不会撑破容器边界，同时width和height设为auto，让图片严格保持原始宽高比。

方案2：传统居中方法（无需flex） #

如果你不想用flex，可以用text-align和margin组合实现居中，同时限制图片的最大宽高：

.image-preview {
  height: 600px;
  width: 50%;
  border: 1px solid red;
  text-align: center; /* 实现图片水平居中 */
  line-height: 600px; /* 用行高匹配容器高度，辅助垂直居中 */
}

.image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle; /* 配合行高实现垂直居中 */
}

这个方法完全基于传统CSS属性，兼容性拉满，适合需要兼容旧版浏览器的场景，同样能保证图片比例且不超出容器。

方案3：使用object-fit（精细控制显示效果） #

如果需要对图片的显示方式有更精细的控制，比如让图片填满容器（超出部分裁剪）或者完整显示（留白填充容器），可以用object-fit属性：

.image-preview {
  height: 600px;
  width: 50%;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 完整显示图片，保持比例，空白部分填充容器 */
  /* 若需要图片填满容器（超出部分裁剪），可以替换为：object-fit: cover; */
}

这个方法适合对图片展示效果有特定要求的场景，兼容性也很好（仅IE不支持）。

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