Css <；图>&&书信电报；figcaption>；使用浮动图像、figcaption换行和文章文本换行图像/标题

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

我想要的和已经完成的：

• 纯HTML5兼容和CSS
• 在文章中显示图像
• 图像必须有标题
• 标题必须位于图像下方
• 标题必须限制为图像的水平大小
• 标题可能超过一行，文本应换行到下一行（仍在图像大小范围内）
• 图像和标题必须作为一个组向左或向右浮动（考虑使用
  ）
• 文章的文本必须环绕图像和标题
• 图像大小各不相同（例如，第一个图像为200px，第二个文本中其他地方的图像为320px等）

现在我想补充这些要求：

• 我不喜欢像
  那样添加图像的原始宽度，但只有在没有其他方法的情况下
• 响应性设计：当图像宽度占显示器宽度的50%以上时，必须限制为显示器宽度的50%
• 当显示宽度为320px或更低时，图像不能浮动，但必须是块级元素，因此图像周围没有文字环绕

我离开的地方：

图{
显示：内联
}
菲卡普顿{
显示：块
}
图1.左{
浮动：左
}
图.右{
浮球：对
}

这是本文文本的一部分，此时将在左侧插入一个图像
图像标题和大量文本
文章文本会不断地环绕图像

尝试以下css，并在调整浏览器大小时查看，文本会环绕图像：

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

figcaption {
  text-align: center;
}

---

也许这对你来说太html3了，但我找到了这个答案：

我不认为这是HTML5或CSS3所禁止的，而且这对我来说确实有效

---

撇开响应性设计要求不谈-我觉得这是一个单独的问题，我没有一个好的CSS唯一的答案。

这可能有助于解决它。我也在寻找一种方法来显示图像右侧的标题与图像的高度相同

figure，.figure{
显示：内联表；
}
菲卡普顿{
显示：表格标题；
标题侧：底部；
背景色：红色；
}
img{
宽度：100%；
}
.形象{
宽度：自动；
}
图形分割{
显示：内联表；
背景色：浅绿色；
}
.标题{
显示：表格标题；
标题侧：顶部；
背景色：红色；
保证金：0；
}

标题
标题标题标题标题
标题标题标题
标题标题标题

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: bottom;
}