我想解决这个问题已经有一段时间了，但还是被困住了。 如能提供帮助，将不胜感激。

对于一个赋值，我需要创建一个Content-Box，其中包含图像，具有边框和figcaption，并且在框中水平居中。 图像和边框之间必须有一些填充。

我已经设法创建了它，但是我得到的反馈是“为什么img的最大宽度是100%”？ 如果我忽略了这一点，图像就不会停留在图形的边界内。 我也尝试在元素上应用CSS，但这似乎不起作用，因为图题并不符合。

我得到的结果是它应该看起来的样子，但是代码不是（完全）准确的。 我已经把我的代码放在这个JSFiddle中

HTML:

    <h1>Games</h1>
     <section class="boardgames">
       <h2>Boardgames</h2>
       <figure>
        <img src="https://images.unsplash.com/photo-1573912303133-d1f823500a79?ixlib=rb- 
          1.2.1&auto=format&fit=crop&w=1267&q=80" alt="Chessboard with some pieces">
         <figcaption>Chessboard with some pieces</figcaption>
       </figure>
     </section>
     <section class="chessboard"></section>

CSS:

    h2 {
        text-align: center;
    }

    .boardgames {
        box-sizing: content-box;
        display: flow-root;
        border: 0.25rem solid silver;
    }

    figure {
      border: 0.25rem solid silver;
      width: 50%;
      text-align: center;
      margin-inline-start: auto;
      margin-inline-end: auto;
      margin-block-end: 20px;
      padding-inline-start: 2px;
      padding-inline-end: 2px;
      padding-block-start: 2px;
      padding-block-end: 2px;
    }

    figure img {
    width: 100%;
    }

    .chessboard {
        box-sizing: content-box;
        border: 5px solid silver;
    }

有人知道如何省略图像的最大宽度，但仍然得到我需要的结果吗？ 希望我的描述足够准确。
感谢您提前付款。