<figure>

🔰 HTML ⟩ Elements ⟩

code example

result

HTML

<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>

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;
}

<img> banner