Bootstrap5横向滚动页面实现图片随窗口宽度自适应缩放问询

核心问题修正 #

你现有代码存在两处冲突配置导致效果不符合预期：

• 给.row设置了flex-direction: column，但HTML里的row又加了flex-row类，二者冲突导致布局失效
• 用了Bootstrap默认的.col类，该类会默认平分父容器宽度，无法适配不同宽高比的图片

调整后CSS代码 #

.container-fluid{
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100vh; /* 替换原height:100%，确保占满视口高度 */
  padding: 0; /* 去掉Bootstrap默认容器内边距，实现图片占满全宽 */
}

.flex-nowrap {
  -webkit-flex-wrap: nowrap!important;
  -ms-flex-wrap: nowrap!important;
  flex-wrap: nowrap!important;
}

/* 新增col适配规则，禁止默认宽度平分 */
.row > .col {
  width: auto;
  flex: 0 0 auto; /* 列宽由图片内容自动撑开，禁止拉伸或收缩 */
}

.col > img {
  min-height: 100px;
  max-height: 300px;
  height: 300px;
  width: auto; /* 保持图片原始宽高比 */
  object-fit: contain; /* 避免图片压缩变形 */
  padding-right:10px;
}

/* 可选适配：小屏设备下图片高度自适应视口 */
@media (max-width: 768px) {
  .col > img {
    height: calc(100vh - 20px);
    max-height: unset;
  }
}

HTML调整说明 #

保留现有HTML结构即可，删除你原CSS里的.row {flex-direction: column;}配置，避免和flex-row类冲突。

调整后即可实现预期效果：

• 所有图片高度统一，宽度按原始比例自适应，不会变形
• 整体横向可滚动，窗口缩放时图片会同步等比缩放
• 窗口宽度小于所有图片总宽度时自动出现横向滚动条，不会挤压图片

内容的提问来源于stack exchange，提问作者endo.anaconda