一、主图在浏览器宽度<950px时被遮挡，修改width后出现背景色的问题 #

原因分析 #

从你提供的#image样式代码来看：

#image { 
  position: relative; 
  top: 0; right: 0; bottom: 0; left: 0; 
  width: 100%; 
  height: 100%; 
  margin: auto; 
  border-bottom: 1px solid #ed1c24; 
  object-fit: cover; 
}

问题核心在于**width:100% + height:100%的强制尺寸约束**：

1. 当浏览器宽度小于950px时，图片的父容器大概率存在固定高度（比如绑定视口高度或设置了固定值），同时可能开启了overflow:hidden。此时height:100%会强制图片高度填满父容器，为了维持图片原始宽高比，图片的实际宽度会超出父容器范围，最终被overflow:hidden裁剪遮挡。
2. 如果你修改width属性（比如改成固定值或auto），图片宽度会小于父容器宽度，而object-fit:cover仅在图片自身尺寸范围内裁剪，无法填满父容器的空白区域，父容器的背景色就会暴露出来。

解决方案 #

根据你的需求，提供两种可选方案：

• 方案1：保持图片填满容器且合理裁剪

  1. 给图片的父容器添加aspect-ratio属性，匹配图片的原始宽高比（比如图片是16:9，就写aspect-ratio: 16/9），让父容器随宽度自动维持正确高度。
  2. 简化#image的样式，保留核心适配属性：

  #image {
    width: 100%;
    height: 100%;
    margin: auto;
    border-bottom: 1px solid #ed1c24;
    object-fit: cover;
  }
  

  这样图片会按比例填满容器，不会出现无意义的超出遮挡。

• 方案2：完整显示图片，避免裁剪
  如果不想裁剪图片，把object-fit:cover改成object-fit:contain，同时让高度随宽度自动调整，再给父容器设置和图片背景一致的颜色，避免背景色暴露：

  #image {
    width: 100%;
    height: auto;
    margin: auto;
    border-bottom: 1px solid #ed1c24;
    object-fit: contain;
  }
  /* 给父容器匹配图片背景色 */
  .image-container {
    background-color: #你的图片背景色;
  }
  

二、830px媒体查询无响应的问题 #

常见原因及排查方向 #

1. 缺少viewport元标签：响应式布局必须在HTML头部添加这个标签，否则小窗口（包括移动端）无法正确识别媒体查询：

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

2. 语法错误：检查媒体查询写法是否规范，比如有没有漏写@media、括号是否匹配，正确示例：

   @media screen and (max-width: 830px) {
     /* 响应式样式写在这里 */
   }
   

3. 优先级被覆盖：如果媒体查询的样式写在普通CSS规则之前，会被后面的高优先级规则覆盖，确保媒体查询放在需要修改的样式之后。
4. 选择器优先级不足：比如你在媒体查询里用了#image，但其他地方有body #image这种更具体的选择器，会覆盖媒体查询的样式。可以用浏览器开发者工具（F12）查看元素样式面板，确认媒体查询规则是否被应用。

快速排查步骤 #

打开浏览器开发者工具（按F12），切换到“元素”面板选中目标元素，在“样式”面板里查看830px媒体查询的规则：如果规则被划掉，说明被其他样式覆盖；如果看不到规则，说明媒体查询语法错误或位置不对。

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