基于HTML/CSS实现图片随屏幕尺寸自适应缩放（保持宽高比）

核心思路 #

通过CSS布局控制页面整体适配视口，同时利用CSS属性保证图片按原比例缩放且完整显示，全程无需JavaScript即可满足需求。

步骤1：全局样式重置与视口适配 #

先设置html和body的基础样式，确保页面完全占满视口，无多余边距和滚动条：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 强制隐藏滚动条 */
}

步骤2：页面整体布局 #

用Flexbox实现头部、主体、页脚的垂直分配，确保整体高度刚好填满视口：

body {
  display: flex;
  flex-direction: column; /* 元素垂直排列 */
}

#header, #page_footer {
  /* 可根据需求设置固定高度，示例为50px */
  height: 50px;
  background-color: #f0f0f0;
}

#central_body {
  flex: 1; /* 占据头部和页脚之外的所有剩余空间 */
  display: flex; /* 内部图片区和导航区横向排列，需纵向可改为column */
}

步骤3：图片容器与缩放控制 #

让图片容器占满主体区域的可用空间，同时保证图片按原比例完整显示：

.image_area {
  flex: 1; /* 占据主体区域的主要空间，若导航需固定宽度可单独设置 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 可选，给图片添加边距 */
}

#image_to_resize {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 强制图片按原比例缩放，完整显示在容器内 */
}

补充说明 #

• 若导航栏需要固定宽度，可给.nav设置width: 200px这类固定值，image_area的flex:1会自动填充剩余空间。
• object-fit: contain会保证图片完整显示，若希望图片填满容器（允许裁切边缘），可替换为object-fit: cover，但符合需求的选项是contain。
• 纯CSS实现，兼容性覆盖绝大多数现代浏览器，无需额外脚本。

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