我太懂你这种纠结了！既要图片能跟着屏幕大小自适应缩放，又得死死保住原始比例不扭曲，还得提前给图片占好位置——不然加载前后布局跳来跳去，带边框的话更是丑到炸，尤其是还要适配不同尺寸的多图，确实头疼！

咱们直接上能解决所有问题的方案，核心思路是用容器做占位+CSS自定义属性适配多图+aspect-ratio锁死比例，完全不用纠结clamp（当然后面也会说怎么用clamp优化）：

第一步：调整HTML结构，给图片加个容器 #

先给每张图片套个父容器，这个容器的作用就是提前按照图片比例占好位置，不管图片有没有加载，布局都不会乱跳：

<!-- 900x600的横图 -->
<div class="img-container" style="--img-w: 900; --img-h: 600;">
  <img src="https://i.sstatic.net/6DPT74BM.jpg" alt="示例横图" class="fit-img">
</div>

<!-- 800x1200的竖图（不同比例） -->
<div class="img-container" style="--img-w: 800; --img-h: 1200;">
  <img src="你的竖图地址" alt="示例竖图" class="fit-img">
</div>

这里用--img-w和--img-h两个自定义属性存每张图的原始宽高，后面CSS直接用这俩值计算比例，多图复用超方便。

第二步：核心CSS代码，逐行解释 #

/* 图片容器：负责占位、锁比例、限制最大尺寸 */
.img-container {
  --border-width: 10px;
  
  /* 1. 用自定义属性计算图片原始宽高比，这是锁死比例的关键！ */
  aspect-ratio: calc(var(--img-w) / var(--img-h));
  
  /* 2. 限制最大宽度：不超过图片原始宽度，同时不超过父容器的100%（避免撑爆布局） */
  max-width: min(var(--img-w) * 1px, 100%);
  
  /* 3. 限制最大高度：不超过图片原始高度，同时可以设为视口高度的百分比（比如80vh，避免图片占满整个屏幕） */
  max-height: min(var(--img-h) * 1px, 80vh);
  
  /* 4. 你的边框、背景样式，和原来的逻辑一致 */
  outline: var(--border-width) solid red;
  outline-offset: calc(-1 * var(--border-width));
  background-color: cyan;
  
  /* 5. 让容器居中（可选，根据你的布局调整） */
  margin: 2rem auto;
  
  /* 6. 相对定位，给里面的绝对定位图片做参考 */
  position: relative;
  
  /* 7. 防止容器被内容撑开，严格保持比例 */
  overflow: hidden;
}

/* 图片本身：自适应容器、居中显示 */
.fit-img {
  /* 1. 占满容器的宽高，因为容器已经锁了比例，所以图片自然保持原始比例 */
  width: 100%;
  height: 100%;
  
  /* 2. 控制图片显示方式：
     - object-fit: cover; 填满容器（超出部分裁剪，适合需要撑满边框的场景）
     - object-fit: contain; 完整显示图片（容器内留空白，适合需要展示全图的场景）
     选哪个看你需求，两个都不会让图片扭曲！ */
  object-fit: cover;
  
  /* 3. 图片在容器内居中（如果用contain的话，空白会均匀分布在四周） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

为什么这个方案能解决你的所有问题？ #

1. 彻底避免布局偏移：容器用aspect-ratio提前按照图片比例占好位置，就算图片还没加载，容器的大小也不会变，边框、间距完全不会乱跳。
2. 永远不扭曲：容器的宽高永远保持原始比例，图片跟着容器走，从根源上避免了比例失衡的问题，不管屏幕怎么缩都不会扭曲。
3. 自适应缩放：max-width: min(原始宽度, 100%)保证图片在大屏幕上不会超过原始尺寸（避免模糊），小屏幕上自动缩到父容器宽度；max-height则限制了图片在短屏幕上的最大高度，不会撑爆视口。
4. 多图复用：每张图只要改--img-w和--img-h两个值就行，不用写重复CSS，适配不同尺寸的图超省心。

你提到的clamp怎么用？优化最小宽度 #

如果想让小屏幕上图片不会缩得太窄（比如至少300px宽），可以把容器的max-width改成clamp：

max-width: clamp(300px, min(var(--img-w) * 1px, 100%), var(--img-w) * 1px);

这个clamp的意思是：

• 最小宽度300px（屏幕再窄也不会比这个小）
• 最大宽度不超过图片原始尺寸
• 中间宽度自动适配父容器的100%

再说说你原来代码的问题 #

你之前直接给img设width:900px; height:600px，再配max-width/max-height:100%，看似没问题，但当屏幕高度变矮时，max-height:100%会把height压小，但width还是900px（除非屏幕宽度也小于900px），这就破坏了宽高比，导致图片扭曲；而去掉height后，width:900px; height:auto，屏幕变窄时max-width触发让width缩小，height自动按比例调整，但屏幕变矮时，max-height:100%会压小height，但width还是按原始比例计算的话，可能超过屏幕宽度，同样会出问题。

而用容器+aspect-ratio的方案，容器的宽高永远保持原始比例，图片跟着容器走，从根源上避免了比例失衡的问题。

试试这个方案，绝对能解决你的所有痛点！