Frame

Frame embeds a media object with a fixed aspect ratio and with the option to adjust the focus point and fit behavior.

Default frame with ratio 1:1

<div class="gh-frame" style="--gh-ratio: 1/1; --gh-object-x: 50%; --gh-object-y: 50%; --gh-object-fit: cover;">
  <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
</div>

Frame with 16:9 ratio

<div class="gh-frame" style="--gh-ratio: 16/9; --gh-object-x: 50%; --gh-object-y: 25%; --gh-object-fit: cover;">
  <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
</div>

Frame with 5:4 ratio

<div class="gh-frame" style="--gh-ratio: 5/4; --gh-object-x: 50%; --gh-object-y: 25%; --gh-object-fit: cover;">
  <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
</div>

Frame with 3:4 ratio

<div class="gh-frame" style="--gh-ratio: 3/4; --gh-object-x: 50%; --gh-object-y: 25%; --gh-object-fit: cover;">
  <img src="/assets/public/media/card-placeholder.jpg" alt="A cyclist in sunny backlight." loading="lazy">
</div>