Fix sizing and header alignment

scripts/generate-assets.mjs

@@ -116,9 +116,7 @@ const renderThumbnail = (photo, isCurrent) => {
   </a>`;
 };
 
-const renderFrame = (
-  photo
-) => `<figure class="frame-figure" style="--frame-ratio:${photo.aspectRatio}">
+const renderFrame = (photo) => `<figure class="frame-figure">
     ${renderPicture(
       photo,
       frameSizes(photo),

src/index.scss

@@ -78,10 +78,8 @@ img {
   min-width: 0;
   min-height: 100dvh;
   display: grid;
-  grid-template-columns: minmax(5rem, 10vmin) minmax(0, 1fr) minmax(
-      7rem,
-      14vmin
-    );
+  grid-template-columns: minmax(5rem, 10vmin) minmax(0, 1fr) minmax(7rem,
+      14vmin);
   position: relative;
 }
 
@@ -143,14 +141,6 @@ img {
 .frame-content {
   min-width: 0;
   min-height: 0;
-  display: grid;
-
-  // A full-width column gives the figure a definite width to size against, so
-  // `100%` below resolves to the real available width (not the image's own,
-  // content-collapsed width) even before the photo has loaded.
-  grid-template-columns: minmax(0, 1fr);
-  align-content: center;
-  justify-items: center;
   position: relative;
 }
 
@@ -189,26 +179,21 @@ img {
   pointer-events: none;
 }
 
-// Size the framed photo to its final, contained dimensions up front — width is
-// capped by the available width (100%) and by the height limit scaled by the
-// photo's aspect ratio — so the white frame never grows from a tiny box to the
-// photo's size while the image is still loading. --frame-ratio is set per photo.
-.frame-figure {
-  margin: 0;
-  inline-size: min(100%, calc((100dvh - 5rem) * var(--frame-ratio, 1)));
-}
-
+.frame-figure,
 .frame-figure picture {
-  display: block;
+  display: contents;
 }
 
 .frame-figure img {
-  inline-size: 100%;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  inline-size: auto;
   block-size: auto;
-  max-block-size: calc(100dvh - 5rem);
+  max-inline-size: 100%;
+  max-block-size: 100%;
   border: var(--border-width) solid var(--color-text);
   background: var(--color-text);
-  object-fit: contain;
   box-shadow: 0 0 0 1px rgb(32 33 36 / 16%);
 }
 
@@ -243,13 +228,15 @@ img {
   }
 
   .site-header {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-around;
     padding: var(--space-s);
   }
 
   .slideshow-toggle {
-    inset-block-start: 50%;
-    inset-inline: auto var(--space-s);
-    transform: translateY(-50%);
+    position: static;
   }
 
   .site-header h1 {
@@ -299,12 +286,4 @@ img {
     grid-row: 2;
     padding: var(--space-s);
   }
-
-  .frame-figure {
-    inline-size: min(100%, calc((100dvh - 12rem) * var(--frame-ratio, 1)));
-  }
-
-  .frame-figure img {
-    max-block-size: calc(100dvh - 12rem);
-  }
-}
+}

src/photos.test.ts

@@ -138,7 +138,7 @@ describe('PhotoGallery', () => {
     ).toBe('static/photos/one-2400.jpg');
   });
 
-  it('sets the aspect ratio so the frame reserves the photo size before it loads', () => {
+  it('keeps the photo dimensions on the frame image so it reserves space before it loads', () => {
     const { gallery, frame, toggle } = setup();
     new PhotoGallery({ gallery, frame, toggle, autoAdvance: false });
 
@@ -148,11 +148,11 @@ describe('PhotoGallery', () => {
         new MouseEvent('click', { bubbles: true, cancelable: true })
       );
 
-    // Thumbnail markup is 320x240, so the figure carries that ratio for CSS.
-    const figure = frame.querySelector<HTMLElement>('.frame-figure');
-    expect(
-      parseFloat(figure?.style.getPropertyValue('--frame-ratio') ?? '')
-    ).toBeCloseTo(320 / 240, 4);
+    // The thumbnail markup is 320x240; cloning keeps those attributes so the
+    // browser reserves the framed photo's size from its aspect ratio.
+    const image = frame.querySelector<HTMLImageElement>('.frame-figure img');
+    expect(image?.getAttribute('width')).toBe('320');
+    expect(image?.getAttribute('height')).toBe('240');
   });
 
   it('shows a loading animation for a user load and clears it when ready', () => {

src/photos.ts

@@ -71,13 +71,6 @@ const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => {
   image.removeAttribute('loading');
   image.decoding = 'async';
 
-  // Reserve the photo's final size before it loads (see --frame-ratio in CSS).
-  const ratio =
-    Number(image.getAttribute('width')) / Number(image.getAttribute('height'));
-  if (Number.isFinite(ratio) && ratio > 0) {
-    figure.style.setProperty('--frame-ratio', String(ratio));
-  }
-
   figure.append(picture);
 
   return figure;