&带有浮动图像，figcaption环绕，文章文本环绕图像/标题

Question

搜索了几个星期的网页，但不能找到满足我所有需求的答案（只有部分），帮助是非常欢迎的。

我想要的和已经完成的：

• 符合普通HTML5和CSS
• 在文章中显示图像
• 图像必须有标题
• 标题必须位于图像下方
• 标题必须限制在图像的水平大小
• 标题可能长于一行，文本应换行到下一行（仍在图像大小范围内）
• 图像和标题必须作为一组向左或向右浮动（请考虑使用

  )

• 文章文本必须环绕图像和标题
• 图像大小不同（第一个图像为200px，文本中其他地方的第二个图像为320px等）

现在我想补充一下这些要求：

• 我不喜欢像

  那样添加图像的原始宽度，但只有在没有其他方法的情况下才可以。

• 响应式设计：当图像宽度将占显示宽度的50%以上时，必须将其限制在显示宽度的50%。
• 当显示宽度为320px或以下时，图像不能浮动，但必须是块级元素，因此图像周围不会有文字环绕。

我离开的地方：

null

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>

null

（为了让它看起来更好，我省略了填充/边距等。）

Answer 1

尝试以下css并在调整浏览器大小时查看图像上的文字换行：

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

figcaption {
  text-align: center;
}