如何用CSS实现同级元素与自适应图片等宽（不使用JavaScript）

可以实现，只需要调整CSS布局规则即可，无需JavaScript：

核心原理 #

让父容器的宽度由内部图片的实际宽度撑开，再让同级的.info元素作为普通块级元素默认撑满父容器宽度，自然就和图片宽度保持一致。

修改后的代码 #

CSS #

.container {
  /* 容器宽度由内部最宽的内容（即图片）决定 */
  display: inline-block;
}

.img-wrapper {
  line-height: 0;
}

/* 若需要适配小屏幕避免图片溢出，可增加如下规则 */
.img-wrapper img {
  max-width: 100%;
  height: auto;
}

.info {
  /* 移除原有table-cell属性，块级元素默认撑满父容器宽度 */
  background: black;
  color: white;
  padding: 1em 2vmin;
}

.info p {
  margin: 0;
}

HTML 无需修改，保持原有结构即可： #

<div class="container">
  <div class="img-wrapper">
    <img src="https://picsum.photos/600/500">
  </div>
  <div class="info">
    <p>Lorem ipsum </p>
  </div>
</div>

Grid兼容替代方案 #

如果偏好Grid布局，也可以用以下写法实现相同效果，逻辑和inline-block方案一致：

.container {
  display: grid;
  width: fit-content;
}
/* 其余样式和上述方案一致 */

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