Media commons specify display and sizing. The application supplies the source, aspect ratio, accessible alternative, and loading behavior.
| Class | Contract |
|---|---|
media-cover |
Block display, full width and height, object-fit:cover |
media-contain |
Block display, full width and height, object-fit:contain |
media-fluid |
Block display, full inline size, automatic block size |
<figure class="m:0">
<div class="aspect-ratio:[16/9]">
<img class="media-cover" src="/project-preview.jpg" alt="Project overview with its navigation expanded" />
</div>
<figcaption>Project overview</figcaption>
</figure>
<img class="media-fluid" src="/architecture.png" alt="Packages grouped by their platform" width="1200" height="800" />media-cover can crop the subject; choose media-contain for a logo or
diagram whose edges must remain visible. Both need a box with meaningful
dimensions. media-fluid preserves the media’s intrinsic proportions and
uses logical dimensions, so it follows the writing mode.
Set intrinsic width and height when known to reserve space before an
image loads. An empty alt is appropriate only when the image is decorative
or its information is already supplied by adjacent content.