Flexbox实现响应式图片与文本Div并排布局问题求助

核心问题 #

1. 容器使用inline-flex导致宽度计算异常，无法稳定占据父元素空间
2. 图片容器未设置宽度约束，图片无限制拉伸挤压文本区域
3. 图片强制设置height="100%"导致比例变形，破坏整体布局

修改后的完整代码 #

HTML

<div class="container flex-direction">
  <div class="div1">
    <img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" />
  </div>
  <div class="div2">
    <h>Lorem ipsum</h>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p>
  </div>
</div>

CSS

.container {
  display: flex; /* 替换inline-flex，确保容器占满可用宽度 */
  border: 1px solid black;
  margin: 5%;
  width: 90%;
}

.flex-direction {
  flex-direction: row;
}

.div1 {
  flex: 0 0 50%; /* 桌面端固定占50%宽度，不收缩不拉伸 */
  overflow: hidden; /* 防止图片溢出容器 */
  border-right: 1px solid black;
}

.div1 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器 */
}

h {
  color: #90bd49;
  font-size: 30px;
  margin-top: 0;
}

p {
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
}

.div2 {
  flex: 1; /* 自动占据剩余空间 */
  padding: 2%; /* 调整内边距提升可读性 */
  background-color: #e3e3e3;
}

@media only screen and (max-width: 500px) {
  .flex-direction {
    flex-direction: column;
  }
  .div1 {
    flex: 0 0 100%; /* 移动端占满宽度 */
    border-right: none;
    border-bottom: 1px solid black;
  }
  .container {
    margin: 0;
    width: 100%;
  }
}

关键修改说明 #

• 容器布局：将inline-flex改为flex，确保容器稳定占据父元素的90%宽度，避免inline元素的宽度不确定性
• 图片容器约束：给.div1设置flex: 0 0 50%，固定桌面端宽度占比，配合overflow: hidden防止图片超出容器
• 图片比例控制：移除height="100%"属性，用object-fit: cover保证图片按比例填充容器，同时避免拉伸变形
• 文本容器自适应：用flex:1替代max-width:50%，让文本区域自动填充剩余空间，适配容器宽度变化
• 移动端优化：调整容器宽度为100%、margin为0，图片容器占满宽度，文本区域自然下移

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