移动端响应式图片组无法同行显示及图片变形问题

开发者阿泽

2026-7-31

响应式图片容器并排显示问题修复

问题根源

手机视图下图片堆叠：使用col-sm意味着屏幕宽度小于576px时，列会自动垂直堆叠，导致图片上下排列。
图片尺寸异常：每张图片设置了固定width和height，破坏了图片原始比例；加上自定义margin不一致，小屏幕下容器空间被挤压，引发个别图片宽度显示异常。

修复方案

1. 强制所有屏幕下图片并排

给row添加flex-nowrap类，禁止列换行；同时用col替代col-sm，确保所有屏幕宽度下列都能平分空间。

2. 统一图片尺寸规则

去掉固定宽高，用max-width:100%和height:auto保持图片比例；统一margin避免空间挤压，用object-fit:contain保证图片完整显示。

修改后的代码

HTML

<div class="container-fluid">
    <div class="row flex-nowrap">
      <div class="col">
        <img src="brands/Adidas-Logo.png" alt="Adidas" class="brand-img" id="brand_img_adidas">
      </div>
      <div class="col">
        <img src="brands/Nike_logo.png" alt="Nike" class="brand-img" id="brand_img_nike">
      </div>
      <div class="col">
        <img src="brands/the-north-face-logo-png-8.png" alt="The North Face" class="brand-img" id="brand_img_north">
      </div>
      <div class="col">
        <img src="brands/tommy-hilfiger-logo-png-transparent.png" alt="Tommy Hilfiger" class="brand-img" id="brand_img_tommy">
      </div>
      <div class="col">
        <img src="brands/zara-logo-0.png" alt="Zara" class="brand-img" id="brand_img_zara">
      </div>
    </div>
  </div>

CSS

.brand-img {
    max-width: 100%;
    height: auto;
    margin: 0 10px;
    object-fit: contain;
}

/* 保留特定品牌的尺寸调整需求（可选） */
#brand_img_nike {
    max-width: 120%;
}