CSS设置图片宽度自适应但高度溢出窗口出现滚动条如何解决

你当前的代码只限制了图片的最大宽度，没有对高度做约束，所以当图片高度大于窗口高度时就会出现滚动条。可以通过以下两种方案实现宽高都自适应窗口，同时保持图片比例不变形：

方案1：视口单位+max宽高限制 #

首先清除页面默认边距，避免默认边距撑出滚动条：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

修改img样式，同时限制最大宽高不超过视口范围：

img {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}

如果需要图片在窗口中居中展示，可以给父级div添加如下样式：

div {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

方案2：使用object-fit属性（兼容性覆盖绝大多数现代浏览器） #

如果需要父容器占满整个窗口，用object-fit控制图片填充规则更方便：

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 100vh;
}
img {
  width: 100%;
  height: 100%;
  /* 保持图片原始比例，完整展示所有内容，超出容器的区域留空 */
  object-fit: contain;
}

两种方案都可以实现无论窗口宽高如何调整，图片都会等比例缩放，完整展示在窗口内，不会出现滚动条。

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