如何使用CSS正确缩放定位容器内图片 实现居中裁剪适配

需求说明 #

搭建表情包展示页面，需在容器内加载不同比例的图片资源（含宽幅横图、超长竖图），要求：

• 容器固定占屏幕宽度的50%，高度自适应
• 容器内图片保持原比例、居中显示，无拉伸变形
• 宽幅横图上下自动保留白边，超长竖图左右自动保留白边

效果参考 #

• 预期效果：
  
• 当前错误实现效果：
  

现有代码 #

CSS部分 #

.homePage {
  width: 100%;
  min-height: calc(100vh - 80px);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.homePage .post {
  width: 50%;
  background-color: rgb(250, 250, 250);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 20px;
  padding: 20px;
  border-radius: 15px;
}

.post .postHeader {
  display: flex;
  justify-content: center;
  width: 100%;
}

.postHeader .title {
  flex: 50%;
}
.postHeader .deletePost {
  flex: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.deletePost button {
  border: none;
  background: none;
  font-size: 30px;
  cursor: pointer;
}

.post .postImgContainer {
  word-wrap: break-word;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:center;
  overflow: hidden;
  overflow-y: auto;
}

JSX/HTML部分 #

<div className="homePage">
      {imageLists.map((image) => {
        return (
          <div className="post">
            <div className="postHeader">
              <div className="title"></div>
            </div>
            <div className="postImgContainer">
              <img src={image} />
            </div>
          </div>
        );
      })}
</div>

当前问题 #

调整.postImgContainer的flex-direction属性在column和row间切换时，仅能适配单一比例图片，另一类比例图片会出现拉伸变形，无法同时兼容横图、竖图的展示要求。

实现方案 #

核心通过CSS object-fit: contain属性实现，该属性会强制图片保持原有宽高比缩放，完整展示在容器范围内，不足区域自动留白，完全匹配需求。仅需修改图片容器样式、新增图片标签样式即可，其余原有代码无需调整：

/* 替换原有.postImgContainer样式 */
.post .postImgContainer {
  width: 100%;
  /* 可选：限制超长竖图最大高度，避免单图占满屏幕，不需要可删除 */
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 留白区域颜色，和卡片背景色一致即可 */
  background-color: rgb(250, 250, 250);
  border-radius: 8px;
}

/* 新增容器内图片样式 */
.post .postImgContainer img {
  /* 核心配置：等比缩放完整展示，不变形不裁剪 */
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

配置说明：如果不需要限制超长竖图的展示高度，删除.postImgContainer上的max-height配置即可，容器高度会自动跟随图片高度适配，自动实现横图上下留白、竖图左右留白的效果。

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