如何通过多种方式实现Div与图片并排且保持响应式等高？

我整理了几种靠谱的方案，能实现Div和图片并排显示，还能在响应式布局里稳稳保持高度一致，一起来看看：

方案1：Flexbox布局（最推荐，现代浏览器友好） #

Flexbox天生就是为等高布局设计的，父容器设为display: flex后，子元素会自动拉伸至同一高度，适配性拉满。

调整后的代码示例：

.container {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}
.image {
  flex: 1; /* 自动分配剩余空间，也可设固定比例如50% */
  position: relative; /* 让内部绝对定位元素相对它 */
  min-width: 300px; /* 避免屏幕过窄时内容挤压 */
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}
.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  margin: 0; /* 清除默认边距 */
}
.videotext {
  flex: 1;
  padding: 50px;
  color: white;
  text-align: center; /* 修正原代码的align-text拼写错误 */
  background-color: blue;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 让文本垂直居中 */
}

<div class="container">
  <div class="image">
    <img src="your-image-url.jpg" alt="图片描述">
    <p>图片上的文本标签</p>
  </div>
  <div class="videotext">
    <h2>这里是Div内的标题</h2>
    <p>可添加任意文本、按钮或其他元素</p>
  </div>
</div>

小提示：flex-wrap: wrap确保在移动端自动转为单列布局，flex:1让两个子元素平分宽度，也可以根据需求设置不同比例（比如flex: 2和flex:1实现2:1的宽度分配）。

方案2：CSS Grid布局（灵活强大，适合复杂布局） #

Grid布局能更精准地控制行列结构，实现等高并排简直是小菜一碟，尤其适合需要多列或复杂对齐的场景。

代码示例：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式自动调整列数 */
  gap: 0; /* 列之间的间距，可自定义如20px */
}
.image {
  position: relative;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  margin: 0;
}
.videotext {
  padding: 50px;
  color: white;
  text-align: center;
  background-color: blue;
  display: grid;
  place-content: center; /* 快速实现内容水平+垂直居中 */
}

<div class="container">
  <div class="image">
    <img src="your-image-url.jpg" alt="图片描述">
    <p>图片上的文本标签</p>
  </div>
  <div class="videotext">
    <h2>这里是Div内的标题</h2>
    <p>可添加任意文本、按钮或其他元素</p>
  </div>
</div>

小提示：repeat(auto-fit, minmax(300px, 1fr))是响应式核心——当屏幕宽度足够时两列并排，宽度不足时自动换行成单列，Grid会强制同一行的单元格高度一致。

方案3：Table/Table-Cell布局（兼容性拉满，支持老浏览器） #

如果需要兼容IE8及以上的老旧浏览器，Table布局是个稳妥的选择，表格单元格天生就支持等高效果。

代码示例：

.container {
  display: table;
  width: 100%;
  table-layout: fixed; /* 让列宽度均匀分配，不受内容影响 */
}
.image, .videotext {
  display: table-cell;
  vertical-align: middle; /* 让内容垂直居中 */
  width: 50%; /* 固定各占一半宽度 */
}
.image {
  position: relative;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  margin: 0;
}
.videotext {
  padding: 50px;
  color: white;
  text-align: center;
  background-color: blue;
}
/* 响应式适配：小屏幕转为块级元素 */
@media (max-width: 600px) {
  .container {
    display: block;
  }
  .image, .videotext {
    display: block;
    width: 100%;
  }
}

<div class="container">
  <div class="image">
    <img src="your-image-url.jpg" alt="图片描述">
    <p>图片上的文本标签</p>
  </div>
  <div class="videotext">
    <h2>这里是Div内的标题</h2>
    <p>可添加任意文本、按钮或其他元素</p>
  </div>
</div>

小提示：table-layout: fixed避免因内容长度差异导致列宽不均，通过媒体查询在移动端转为单列布局，兼顾兼容性和响应式需求。

方案4：Aspect Ratio + Flex（固定比例的等高布局） #

如果需要让图片和Div保持固定宽高比（比如16:9的Banner比例），可以结合aspect-ratio属性和Flex实现精准的等高控制。

代码示例：

.container {
  display: flex;
  flex-wrap: wrap;
}
.image {
  flex: 1;
  position: relative;
  aspect-ratio: 16/9; /* 固定宽高比 */
  min-width: 300px;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  margin: 0;
}
.videotext {
  flex: 1;
  padding: 50px;
  color: white;
  text-align: center;
  background-color: blue;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 16/9; /* 和图片保持相同比例 */
}

小提示：aspect-ratio属性直接定义元素的宽高比，确保图片和Div在任何屏幕尺寸下都保持相同高度，适合需要固定比例的卡片、Banner等场景。

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