求助：HTML卡片内图片浏览器缩放时消失，如何固定位置？

问题根源分析 #

你的Card容器存在两个核心问题：

1. 盒模型默认是content-box，设置的width:90%加上左右各5%的padding，会让容器总宽度超过100%，再加上固定的margin-left:80px，窗口缩小时容器会被挤出可视区域。
2. 固定百分比高度height:85%依赖父元素的明确高度，若父元素未设置，容器高度可能不足以容纳图片，导致图片被挤出去。

具体修复步骤 #

1. 修复盒模型，避免宽度溢出

给Card添加box-sizing: border-box，让padding包含在设置的宽度范围内，不会额外增加容器总宽度：

box-sizing: border-box;

2. 替换固定margin为自动居中

把margin-left:80px改成margin: 0 auto，让容器在父元素内水平居中，窗口缩小时不会偏移到可视区域外：

margin: 0 auto;

3. 调整高度设置，适配内容

去掉固定的height:85%，换成min-height: 85vh（让容器至少占视口高度的85%），或者直接用height: auto让容器根据内容自动撑开：

min-height: 85vh;
/* 或者用 height: auto; */

4. 让图片自适应容器

给Card内的图片添加样式，确保它不会超出容器范围：

.Card img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片下方的默认空白间隙 */
}

修改后的完整Card CSS #

.Card{
  border:none;
  font-family: 'NCS Radhiumz';
  border-radius: 15px;
  background-color: #000000;
  width:90%;
  min-height: 85vh;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
}

额外基础样式优化 #

给html和body添加基础样式，消除默认边距并确保页面占满视口：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

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