CSS实现图片等比缩放适配固定宽高父div且不拉伸（不使用object-fit）

核心实现逻辑是利用绝对定位自动居中+双维度最大尺寸约束，让阴影包装层始终贴合等比缩放后的图片尺寸，既保证图片不变形，也能让阴影效果正常渲染，完全不需要用到object-fit或者背景图方案。

具体实现步骤 #

• 固定宽高外层父容器设置
  给父容器设置相对定位作为内部元素的定位上下文，同时配置需要的固定宽高：

  .img-container {
    position: relative;
    width: 400px; /* 替换为你需要的固定宽度 */
    height: 300px; /* 替换为你需要的固定高度 */
    border: 1px dashed #ccc; /* 示例虚线框样式，可按需删除 */
  }
  

• 阴影包装层设置
  包装层用绝对定位+四边0偏移+auto margin实现自动居中，仅设置最大宽高限制不设固定尺寸，让它完全被内部图片撑开，阴影样式直接添加在该层即可：

  .img-shadow-wrapper {
    position: absolute;
    /* 兼容低版本浏览器可替换为 top: 0; right: 0; bottom: 0; left: 0; */
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    /* 自定义阴影效果 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-radius: 4px; /* 圆角可按需配置，阴影会自动适配 */
  }
  

• 内部图片设置
  图片设为块级元素消除默认行内间隙，配置宽高自动、双维度最大尺寸100%，浏览器会自动按图片原比例计算缩放尺寸，不会出现拉伸变形：

  .img-shadow-wrapper img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: inherit; /* 包装层有圆角时添加，避免图片溢出圆角范围 */
  }
  

对应HTML结构 #

<div class="img-container">
  <div class="img-shadow-wrapper">
    <img src="你的图片资源地址" alt="图片描述">
  </div>
</div>

效果参考 #

• 横图适配效果：
  
• 方图适配效果：
  
• 竖图适配效果：
  

该方案兼容所有现代浏览器，对图片原始尺寸无要求，横图、竖图、方图都会自动保持原比例在父容器内居中缩放，阴影层始终和图片实际渲染尺寸完全贴合，不会出现阴影范围与图片不匹配的问题，最终效果和object-fit: contain完全一致。

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