媒体查询中CSS命令失效求助：小屏图片样式不生效

AI 小北

2026-8-4

解决小屏设备下图片CSS样式不生效的问题

你的问题出在样式目标元素选错了：

你把#loginPicXs这个ID加在了<source>标签上，但<source>是<picture>内部的资源切换辅助标签，它本身不会被渲染成可见元素，所以针对它写的CSS样式完全不会作用到显示的图片上。
不管是大屏还是小屏，最终显示的图片都是<img>标签，<source>只是负责在符合条件时切换<img>的资源，所以样式必须作用在<img>上。

修改方案一：给`<img>`加ID，针对性写样式

修改后的HTML：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <picture>
        <source media="(max-width: 767px)" srcset="loginformpic_sm_xs.jpg">
        <img src="loginformpic.jpg" class="img-responsive" id="loginImg">
    </picture>
</div>

修改后的CSS：

@media only screen and (min-width: 768px) {
    #loginImg {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    #loginImg {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
}

修改方案二：用类名控制（更适合复用场景）

修改后的HTML：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <picture>
        <source media="(max-width: 767px)" srcset="loginformpic_sm_xs.jpg">
        <img src="loginformpic.jpg" class="img-responsive login-img">
    </picture>
</div>

修改后的CSS：

@media only screen and (min-width: 768px) {
    .login-img {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .login-img {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
}