Vue中如何根据容器内动态卡车图标数量自动等比例调整图标尺寸

开发者阿泽

2026-9-26

解决方案

无需修改现有Vue模板逻辑，仅需添加对应CSS样式即可实现自适应效果，核心利用Flex布局的弹性收缩能力让所有卡车图标自动适配容器宽度。

实现步骤

给外层.trucks容器添加Flex布局配置，强制所有子元素在同一行展示，限制容器宽度与父容器对齐
给每个卡车图标容器.truck-img设置允许收缩规则，同时统一图标间距
给img标签设置自适应宽高规则，避免图片拉伸变形，同时限制单图标最大尺寸，避免装载数少时图标过大

完整CSS代码

.trucks {
  display: flex;
  align-items: center;
  width: 100%;
  /* 如需调整图标间距可修改下方gap值，不需要可删除同时保留原有mr-4类 */
  gap: 1rem;
}

/* 保留原有mr-4类的情况下，清除最后一个图标右边距避免多余溢出 */
.trucks .truck-img:last-child {
  margin-right: 0 !important;
}

.truck-img {
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: auto;
}

.truck-img img {
  display: block;
  width: 100%;
  /* 可根据需求调整单图标最大尺寸 */
  max-width: 48px;
  height: auto;
}