如何避免images类Div溢出？实现可滚动并保持图片宽高比

问题描述 #

多选图片时，class为images的div出现溢出，需要实现横向可滚动，同时保持图片原始宽高比。

解决方案 #

核心修改CSS样式，调整flex布局规则并添加图片比例保护：

关键修改点 #

• 图片样式调整：移除flex:1避免拉伸变形，添加object-fit: contain强制保持宽高比
• 容器样式调整：明确flex-wrap: nowrap确保图片单行排列，补充内边距优化显示

修改后的完整CSS代码 #

* {
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: break-word;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: .25rem;
}

.hide {
  display: none !important;
}

.column {
  flex: 1;
  display: flex;
  flex-flow: column;
}

.row {
  flex: 1;
  display: flex;
  flex-flow: row;
}

.gap {
  gap: .25rem;
}

input,
textarea {
  flex: 1;
  border: 1px solid lightgray;
  border-radius: .25rem;
  padding: .5rem;
}

textarea {
  resize: none;
  min-height: 10rem;
}

.form {
  background-color: bisque;
  border: 1px solid lightgray;
  border-radius: .25rem;
  width: 100%;
  max-width: 62.5rem;
}

.form fieldset {
  border: none;
  padding: .5rem;
}

.form label {
  color: gray;
  font-size: small;
}

.images {
  background-color: gray;
  border: 1px solid lightgray;
  display: flex;
  flex-flow: row nowrap; /* 强制单行排列 */
  align-items: center; /* 垂直居中图片 */
  overflow-x: auto; /* 横向滚动 */
  padding: .25rem; /* 内边距优化显示 */
  flex: none; /* 取消继承的flex:1，避免容器被过度拉伸 */
  min-height: 150px; /* 保证容器最小高度，空状态隐藏仍生效 */
}

.images:empty {
  display: none;
}

.images img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain; /* 保持图片宽高比 */
  margin-right: .25rem; /* 图片间间距 */
}

说明 #

• JS和HTML代码无需修改，上述CSS调整已解决问题
• object-fit: contain会让图片在设定的最大尺寸内完整显示，不会裁剪或拉伸
• flex-flow: row nowrap确保图片始终在一行，超出容器宽度时自动触发横向滚动
• 移除图片的flex:1避免flex布局强制分配空间，破坏比例

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