使用Bootstrap Blade.php布局图片时的裁剪与重叠问题求助

问题根源 #

1. 布局结构不规范：直接给<li>加col-*类，但外层<ul>缺少Bootstrap的row核心布局类，导致列间距、对齐逻辑失效，是移动端图片重叠的主要原因。
2. 图片行内样式冲突：max-width:45vw会让移动端图片超出列容器宽度，min-width:100px在桌面小列容器里强制撑宽，引发图片裁剪。
3. 缺少比例保护机制：未设置图片显示规则，不同比例的图片易被挤压或裁剪。

修复方案 #

替换你的代码为以下版本，直接解决所有问题：

<ul class="client_icon row g-3">
    <li class="col-6 col-md-4 col-lg-3">
        <img src="{{ asset('images/new_client_icon/J&T.png') }}" 
             alt="j&t" 
             class="img-fluid w-100" 
             style="object-fit: contain; max-height: 120px;" />
    </li>
    <li class="col-6 col-md-4 col-lg-3">
        <img src="{{ asset('images/new_client_icon/Albee.png') }}" 
             alt="petronas" 
             class="img-fluid w-100" 
             style="object-fit: contain; max-height: 120px;" />
    </li>
    <li class="col-6 col-md-4 col-lg-3">
        <img src="{{ asset('images/new_client_icon/beaconhospital.jpg') }}" 
             alt="beacon" 
             class="img-fluid w-100" 
             style="object-fit: contain; max-height: 120px;" />
    </li>
</ul>

关键修改说明 #

• 给<ul>添加row g-3：row是Bootstrap列布局的必填父容器，g-3控制列之间的间距（可根据需求调整为g-2、g-4等），彻底解决移动端重叠问题。
• 图片用w-100替代行内宽高限制：让图片占满列容器宽度，配合img-fluid实现自适应缩放。
• object-fit: contain：强制图片完整显示，保留原有比例，避免被裁剪或挤压，解决桌面端裁剪问题。
• max-height: 120px：统一图片最大高度，让同一行图片对齐更整齐，数值可根据视觉需求调整。

额外优化建议 #

• 提前将所有图片处理成相同比例（如1:1或4:3），能进一步减少前端适配压力，视觉效果更统一。
• 移除行内样式，将图片样式写入CSS文件，便于后续维护：

.client_icon img {
    object-fit: contain;
    max-height: 120px;
}

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