CSS实现图片自适应视口：解决缩放放大时max-width失效问题

问题描述 #

我希望图片在任意设备上宽度与视口保持一致，且用户缩放页面时图片能同步缩小或放大。尝试设置html元素字号为10px，用rem给.section设置160rem的宽度，并添加max-width:100%限制，该方案在不同设备及缩小缩放时表现良好，但放大缩放时完全失效。请问能否在缩放比例超过100%时禁用max-width规则？或有没有不使用rem的更好实现方法？

现有代码 #

html {
  font-size: 10px;
}
.section {
  margin: 0;
  width: 160rem;
  max-width: 100%;
}
.section>img {
  width: 100%;
}

<html>
  <head>
    <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <section class="section">
      <img src="https://photographylife.com/wp-content/uploads/2017/07/Hasselblad-X1D-50c-Image-Sample-10.jpg" alt="Image">
    </section>
  </body>
</html>

如需查看效果，请全屏运行代码片段并尝试放大页面。

解决方案 #

方案一：使用视口单位（vw）实现完美同步 #

vw单位直接基于视口宽度计算，缩放页面时会自动跟随视口变化，完全不需要max-width或rem的复杂设置：

.section {
  margin: 0;
  width: 100vw; /* 容器宽度始终等于视口宽度 */
}
.section>img {
  width: 100%;
  height: auto; /* 保持图片原始比例，避免拉伸 */
}

方案二：简化布局，利用块级元素默认特性 #

如果不需要额外的容器样式，可以进一步简化，直接让图片占满视口宽度：

.section>img {
  display: block;
  width: 100vw;
  height: auto;
}

或者仅通过父容器的宽度控制，让图片继承宽度：

.section {
  margin: 0;
  width: 100%; /* 父容器占满视口宽度 */
}
.section>img {
  width: 100%;
  height: auto;
}

关于“缩放超过100%时禁用max-width”的说明 #

浏览器没有原生支持基于页面缩放比例的CSS媒体查询，无法直接通过CSS实现该条件逻辑。不过上述方案已经彻底解决了你的需求，无需依赖这类复杂判断。

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