> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/html/element/figure.md).

# \<figure>

🔰 [HTML](/web/html.md) ⟩ [Elements](/web/html/element.md) ⟩

## code example

{% tabs %}
{% tab title="result" %}
{% embed url="<https://codepen.io/lochiwei/pen/ExmMXGZ>" %}
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="frame">
    <figure>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
        <figcaption>An elephant at sunset</figcaption>
    </figure>
</div>

<div class="frame">
    <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Neckertal_20150527-6384.jpg/1200px-Neckertal_20150527-6384.jpg" alt="Natural Landscape">
        <figcaption>Natural Landscape</figcaption>
    </figure>
</div>
```

{% endtab %}

{% tab title="CSS" %}

```css
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    background-color: gray;
    
    /* ⭐️ CSS variables */
  --padding: 5px;
  --border: thin #333 solid;
}

body {
    padding: 1em;
}

figure {
    
    /* ⭐️ 建立坐標系，用來擺相片文字的絕對位置 */
    position: relative;
    
    border: var(--border);
}

figure img {

    /* 
      ⭐️ <img> 預設為 inline,
        如果沒有改成 block，圖片後面會留一個 
        inline 元素特有的「空隙」❗️
    */
    display: block;

    width: 100%;
}

figcaption {

    /* ⭐️ 將文字放在相片的下緣 */
    position: absolute;
    bottom: 0;
    width: 100%;

    /* ⭐️ 使用透明的背景色，讓後面的相片可以透出來 */
    background-color: rgba(34, 34, 34, 0.5);
    
    /* ⭐️ 文字置中 */
    text-align: center;

    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
}

/* 用於將「相片置中」的外框 */
.frame {
    
    /* ⭐️ 設定相框的最大寬度 */
    max-width: 400px;
    
    /* ⭐️ 相框置中 */
    margin: 1em auto;
    
    padding: var(--padding);
    border: var(--border);
    background-color: white;
}
```

{% endtab %}
{% endtabs %}

## \<img> banner

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mguilb5eCHEl85k-cV3%2F-MgxR3lXndZ6kaQNaSB_%2Fimage%20banner.png?alt=media&amp;token=5e7590d6-ef96-41f6-9a1f-2480d921728b" alt="" data-size="original">&#x20;