如何在CSS 2中让图片及下方文本适配视口？

要让图片和下方的说明文字整体适配老旧设备的视口，你需要确保父容器的高度被正确约束，同时让图片在扣除说明文字高度后的剩余空间内按比例缩放。以下是符合CSS2标准的可行方案：

核心思路 #

1. 给根元素(html/body)设置100%高度，确保视口高度能被正确继承
2. 给容器设置height: 100%，并通过box-sizing: border-box（CSS2支持）确保内边距不影响总高度
3. 给说明文字预留固定高度空间，让图片在剩余区域内自动缩放并保持宽高比

完整代码 #

CSS部分 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div.full-page {
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

div.full-page img {
  max-height: 85%; /* 预留说明文字的显示空间，可根据实际内容调整 */
  max-width: 100%;
  vertical-align: bottom; /* 消除图片下方默认空白间隙 */
}

p.caption {
  margin: 10px 0 0;
  text-indent: 0;
  text-align: left;
  min-height: 10%; /* 固定说明文字的最小高度，避免挤压图片 */
}

HTML部分 #

<div class="full-page">
  <img src="https://cdn.pixabay.com/photo/2021/01/25/08/55/apple-iphone-12-pro-max-5947688_1280.png"/>
  <p class="caption">Caption</p>
</div>

关键说明 #

• html和body设置height:100%是CSS2中实现全屏容器的基础，确保容器能获取视口完整高度
• max-height:85%限制图片的最大显示高度，预留出说明文字的空间，可根据文字行数调整比例
• vertical-align: bottom解决老旧浏览器中行内图片底部的空白问题
• box-sizing: border-box保证容器内边距不会让整体高度超出视口，IE8及以上老旧浏览器支持该属性

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