Bootstrap移动端图片尺寸调整：仅缩小移动端图片至40%

问题核心 #

你需要实现：仅在移动端将目标图片缩小至约40%显示，桌面端保持图片宽度100%，之前直接修改img-fluid的max-width导致桌面端显示异常，原因是img-fluid是全局样式，修改后会影响所有屏幕尺寸。

方案一：自定义响应式类（推荐） #

步骤1：修改HTML，给图片添加自定义类

在图片标签里新增mobile-resize类（类名可自定义）：

<div class="row aboutRow">
    <div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center">
        <img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout mobile-resize" alt="">
    </div>
    <!-- 文本列代码保持不变 -->
</div>

步骤2：添加媒体查询CSS

利用Bootstrap的移动端断点（max-width: 575.98px对应xs尺寸），仅在移动端生效：

/* 仅针对移动端屏幕（宽度<576px） */
@media (max-width: 575.98px) {
  .mobile-resize {
    max-width: 40% !important; /* 覆盖img-fluid的max-width:100% */
    display: inline-block; /* 配合父容器text-center实现居中 */
  }
}

• 媒体查询确保样式只在移动端生效，不会影响桌面端
• inline-block保证图片在text-center的父容器里居中，不会占满整列宽度

方案二：通过父容器选择器定位（无需修改HTML） #

如果不想改动HTML，可以直接通过图片所在的列类来定位，同样用媒体查询：

@media (max-width: 575.98px) {
  .col-xs-3 .logoAbout {
    max-width: 40%;
    display: inline-block;
  }
}

这个方案直接通过父容器的col-xs-3类和图片的logoAbout类精准定位，不需要新增类，适合不想改动HTML结构的场景。

关键说明 #

img-fluid的默认样式是max-width: 100%; height: auto;，直接修改这个类的属性会全局生效，而媒体查询可以限制样式仅在特定屏幕尺寸下生效，这就是解决问题的核心。

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