如何实现流体图像适配屏幕尺寸？附HTML/CSS代码及相关考量

针对你的需求，我先调整现有代码来实现流体图像的自适应，再详细说明选择<img>标签而非CSS background-image的原因：

调整后的代码 #

HTML（补充了语义化的alt属性，优化容器结构） #

<div class="img-container">
  <img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img" alt="Maya主题背景图">
  <img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya" alt="宝藏图标">
</div>

CSS（修复自适应冲突，优化定位逻辑） #

.img-container {
  position: relative; /* 让内部绝对定位元素相对于容器定位，避免随视口乱跑 */
  width: 100%;
  overflow: hidden;
}

.full-img {
  display: block;
  width: 100%;
  height: auto; /* 替换固定height值，保持图像原始比例自适应屏幕 */
  max-height: 100vh; /* 限制最大高度不超过视口，避免页面溢出 */
}

.treasure {
  height: 125px;
  width: 120px;
}

.treasure-maya {
  position: absolute;
  top: 55%;
  left: 44%;
  z-index: 2;
  /* 可选：加transform让定位更精准，适配不同屏幕比例 */
  /* transform: translate(-50%, -50%); */
}

为什么选择<img>标签而非background-image？ #

我从实际开发的几个核心角度来解释这个选择：

• 语义化与SEO友好：<img>是专为展示内容性图像设计的标签，搜索引擎能直接识别图像内容并抓取；而background-image通常被判定为装饰性元素，不会参与内容索引，不利于页面SEO表现。
• 可访问性拉满：屏幕阅读器可以读取<img>的alt属性，为视障用户描述图像内容；background-image作为背景，阅读器完全不会识别它的存在，直接损失这部分无障碍支持。
• 维护与灵活性更高：图像源直接写在HTML里，修改或替换图像时不用动CSS文件，管理更直观。要是后续需要做多分辨率适配（比如移动端加载小图、桌面端加载大图），配合<picture>标签就能轻松实现，这用background-image得写一堆媒体查询，麻烦得多。
• 加载优先级更合理：浏览器对<img>标签的图像加载优先级更高，能确保内容图像优先加载，用户打开页面就能看到核心视觉内容；而background-image的加载优先级通常较低，容易出现页面先渲染、背景图后加载的延迟感。
• 比例控制更精准：<img>通过height: auto就能轻松保持原始比例自适应，不会变形；background-image要靠background-size调整，在复杂布局下很容易出现比例失调的问题。

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