小屏幕下图片截断问题求助：已尝试Media Queries仍未解决

针对你遇到的屏幕缩小时图片被截断的问题，结合视差网站的场景，给你几个直接可行的修复方案：

1. 针对<img>标签的响应式调整 #

如果页面里是<img>元素导致截断，给图片添加以下CSS：

.responsive-image {
  max-width: 100%;
  height: auto;
  object-fit: contain; /* 保持图片完整显示，不会裁剪；如果需要占满容器用cover */
  display: block; /* 消除图片默认的行内元素底部留白 */
}

同时确保图片的父容器不要设置固定宽度/高度，改用相对单位（如%、vw）或min-width/min-height，避免容器限制图片缩放。

2. 针对视差背景图的适配修复 #

视差场景常用背景图，问题大概率出在背景图属性和容器高度设置上：

.parallax-container {
  background-image: url('你的图片路径');
  background-attachment: fixed;
  background-position: center center; /* 始终居中显示图片核心区域 */
  background-repeat: no-repeat;
  background-size: cover; /* 按比例覆盖容器，可能裁剪但保证无空白 */
  min-height: 70vh; /* 用视口高度做最小高度，自适应屏幕大小 */
}

/* 移动端适配（解决fixed背景的显示bug+调整高度） */
@media (max-width: 768px) {
  .parallax-container {
    background-attachment: scroll; /* 移动端取消固定视差，避免图片错位/截断 */
    min-height: 40vh;
    /* 如果需要完整显示图片，可替换为background-size: contain; */
  }
}

关键是不要给容器设置固定px高度，改用vh（视口高度）或百分比，确保容器能随屏幕缩放调整高度，背景图的background-position: center能保证裁剪时保留核心内容。

3. 排查媒体查询无效的原因 #

如果之前的媒体查询没生效，检查这几点：

• 媒体查询的顺序是否正确（移动端样式要放在后面，覆盖桌面端）
• 是否漏写meta viewport标签（必须放在<head>里，保证移动端正确识别屏幕宽度）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 选择器优先级是否足够（比如用类选择器时，有没有被更高优先级的样式覆盖）

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