移动端尺寸下图片消失的CSS问题求助

你修改的是**≥992px（桌面端）**的样式规则，这当然对移动端（<992px）无效——问题根源就在移动端的样式逻辑里，以下是具体分析和修复方案：

问题分析 #

从你提供的CSS代码来看：

• 桌面端（@media (min-width: 992px)）会隐藏img标签（.section-media-half > img {display: none;}），同时通过.section-media-bg的背景图展示图片（这也是桌面端能正常看到图片的原因）。
• 移动端（未触发min-width:992px的屏幕）本应显示img标签，但它现在消失了，大概率是以下两种情况：
  1. 存在未贴出的@media (max-width:991px)规则，强制隐藏了img；
  2. 基础样式中的.section-media-half > *被其他优先级更高的样式覆盖，导致img未正常渲染。

修复方案 #

方案1：检查并修改移动端专属媒体查询 #

搜索你的CSS文件，找到@media (max-width:991px)相关规则，如果其中有类似：

.section-media-half > img {
    display: none;
}

将其修改为：

.section-media-half > img {
    display: block;
    width: 100%;
    height: auto;
}

方案2：强制在移动端显示img #

如果没有找到移动端的隐藏规则，直接在**基础样式区域（所有媒体查询之外）**添加以下代码，强制img在移动端显示：

.section-media-half > img {
    display: block !important;
    width: 100%;
    height: auto;
}

!important用于覆盖可能存在的高优先级隐藏规则，确保img正常渲染。

额外验证 #

修改后刷新页面，检查移动端：

• 图片是否正常显示；
• 是否和文字板块布局协调（可调整.section-media-half的margin-bottom值优化间距）。

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