缩小屏幕宽度时头部图片超出屏幕，设置max-width:100%无效如何解决

原代码失效原因 #

你编写的规则仅在屏幕宽度≤400px时生效，且如果存在行内样式、权重更高的选择器覆盖该规则，就会出现不生效的情况，和图片本身设置width:100%没有冲突。

修复方案 #

• 移除媒体查询限制，提升样式优先级，保证所有设备下都生效：

/* 无需限制仅在400px以下生效 */
.header-media {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    /* 保证图片完整显示不裁切、不变形 */
    object-fit: contain;
}

• 同步检查父容器样式：
  • 删除父容器的固定高度、固定宽度设置，新增width:100%、height:auto规则
  • 确认父容器没有设置overflow: hidden属性，避免超出部分被强制截断
• 若需要图片填充整个头部区域同时不变形，可将object-fit属性值改为cover，同时给父容器设置aspect-ratio: 21/9（可根据设计调整比例），避免头部高度随图片自适应过高

内容的提问来源于stack exchange，提问作者sir-haver