<figure>&<figcaption> 带有浮动图像、figcaption 环绕以及文章文本环绕图像/标题

Question

在网络上搜索了几周，但找不到满足我所有需求（仅部分）的答案，非常欢迎帮助。

我想要并已完成的事情：

• 纯 HTML5 兼容和 CSS
• 显示文章中的图像
• 图片必须有标题
• 标题必须位于图片下方
• 标题必须限制为图像的水平尺寸
• 标题可能长于一行，文本应换行到下一行（仍在图像大小之内）
• 图像和标题必须作为一个组向左或向右浮动（考虑使用<figure class="left">）
• 文章的文字必须环绕图像和标题
• 图像大小各不相同（例如，第一张图像为 200 像素，文本中其他位置的第二张图像为 320 像素等）

现在我想添加这些要求：

• 我不喜欢添加图像的原始宽度，<figure class="left" style="width:200px">但前提是没有其他方法。
• 响应式设计：当图像宽度将占据显示宽度的50%以上时，必须限制为显示宽度的50%。
• 当显示宽度为 320px 或以下时，图像不能浮动，而必须是块级元素，因此图像周围没有文章的文本环绕。

我离开的地方：

figure {
  display: inline
}

figcaption {
  display: block
}

figure.left {
  float: left
}

figure.right {
  float: right
}

<p>This is a part of the text of the article and at this point a image is inserted at the left side
  <figure class="left" style="width:250px">
    <img src="image.png" alt="img txt">
    <figcaption>image caption and a lot of text</figcaption>
  </figure>
  and the article text goes on and on so that it will wrap around the image</p>

（我省略了填充/边距等以使其看起来更好。）

Answer 1

尝试以下 css，看看当您调整浏览器大小时，文本会在图像上换行：

.left {
  float: left;
  border: 5px solid #BDBDBD;
  background: #E0E0E0;
  padding: 5px;
  margin: 0px;
}

figcaption {
  text-align: center;
}