如何根据窗口大小缩放图片并保持图文同行显示？

要实现图片和文字始终同行，且窗口缩小时图片同步按比例缩小，你需要在现有flex布局基础上补充以下关键样式：

1. 基础HTML结构示例 #

<div class="body1">
  <img src="你的图片地址" alt="描述文本">
  <p>这里是需要同行的文字内容</p>
</div>

2. 完善后的CSS代码 #

.body1 {
  display: flex;
  align-items: center; /* 让图片和文字垂直居中对齐 */
  flex-wrap: nowrap; /* 强制元素保持在同一行，默认值可省略，但明确写更清晰 */
  gap: 12px; /* 可选：给图片和文字之间加间距 */
}

.body1 img {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  height: auto; /* 保持图片宽高比例 */
  flex-shrink: 1; /* 允许图片在空间不足时缩小 */
  /* 可选：设置图片的初始最大宽度，比如 max-width: 200px; 限制图片最大尺寸 */
}

.body1 p {
  flex: 1; /* 让文字占据容器剩余空间 */
  overflow: hidden; /* 防止文字溢出容器 */
  text-overflow: ellipsis; /* 文字溢出时显示省略号 */
  white-space: nowrap; /* 强制文字不换行 */
}

关键说明 #

• flex-wrap: nowrap确保图片和文字不会因为空间不足而换行，始终保持在同一行
• 图片的max-width: 100%和height: auto是核心，保证窗口缩小时图片按比例自适应缩小，不会变形或溢出
• 文字部分的flex: 1让它自动填充剩余空间，配合overflow相关样式可以避免文字挤压图片或超出容器

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