如何仅用CSS（优先TailWindCSS v2）实现图片适配figcaption宽度？

需求：能否仅通过CSS实现图片缩小以适配figcaption的宽度？同时优先使用TailWindCSS v2来完成该效果。提供的初始代码如下：

初始HTML代码 #

<div class="container">
  <figure>
    <img src="https://placehold.it/250x250">
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </figcaption>
  </figure>
</div>

初始CSS代码 #

.container {
  border: 1px solid red;
  height: 400px;
  width: 300px;
  padding: 10px;
  margin: 0;
}

figure {
  margin: 0;
  padding: 0;
}

figure img {
  display: block;
  margin: 0 auto;
}

figure figcaption {
  margin-top: 10px;
}

原生CSS实现方案 #

要让图片适配figcaption的宽度，核心是让图片的宽度受限于figcaption的宽度。通过给figure设置display: table，让其宽度由内部内容（figcaption）决定，再让图片继承这个宽度即可：

.container {
  border: 1px solid red;
  height: 400px;
  width: 300px;
  padding: 10px;
  margin: 0;
}

figure {
  margin: 0;
  padding: 0;
  display: table; /* 让figure宽度由figcaption决定 */
  margin: 0 auto; /* 保持figure在容器内居中 */
}

figure img {
  display: block;
  width: 100%; /* 图片宽度填满figure */
  height: auto; /* 自动保持图片比例 */
}

figure figcaption {
  margin-top: 10px;
}

TailwindCSS v2实现方案 #

直接使用Tailwind的工具类即可完成，无需额外自定义CSS：

<div class="border border-red-500 h-[400px] w-[300px] p-2.5 m-0">
  <figure class="m-0 p-0 table mx-auto">
    <img src="https://placehold.it/250x250" class="block w-full h-auto">
    <figcaption class="mt-2.5">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </figcaption>
  </figure>
</div>

关键工具类说明 #

• table：给figure设置display: table，使其宽度由内部最宽的内容（figcaption）决定
• mx-auto：让figure在容器内水平居中
• w-full h-auto：让图片宽度填满父容器（figure），高度自动调整以保持比例
• mt-2.5：对应原CSS的margin-top: 10px（Tailwind v2中默认基准间距为4px，10px即2.5倍基准值）

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