<figure>
<img src="https://libapps.s3.amazonaws.com/....jpg" alt="woman at computer">
<figcaption>Caption for this image.</figcaption>
</figure>
Option | Add the following as a class... | In this element |
---|---|---|
Frame around both image and caption | frame | figure |
Frame around image only | frame | img |
Border around image | border | img |
Centered caption | center | figcaption |
<figure class="imgWrap left" style="width: 30rem;">
<img loading="lazy" src="https://libapps.s3.amazonaws.com/....jpg" alt="newspaper clippings" />
<figcaption>Artist File</figcaption>
</figure>
<p>Vivamus...</p>
<p>Morbi...</p>
If the image were in its own box, you would't need to worry about its size; the box would resize the image automatically. However, because the image is in a box with text, you'll need to set a width on the figure (see highlighted bit above).
Translating pixels to rems: move the decimal one place to the left. Example: 300px = 30rem.
Option | Add the following as a class... | In this element |
---|---|---|
Float the image | imgWrap (required) | figure |
Float image to the left of text | left | figure |
Float image to the right of text | right | figure |
Centered caption | center | figcaption |