This commit is contained in:
2026-07-18 22:42:27 +10:00
parent 99f09f3d05
commit 972182f385
+7 -5
View File
@@ -316,7 +316,8 @@
/* ---------- Image tiles ---------- */
.image-tile-btn {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
position: relative; display: block; width: 100%; max-width: 22rem; margin: 0 auto;
aspect-ratio: 3 / 4;
padding: 0; border: none; border-radius: var(--apple-radius-lg); overflow: hidden;
cursor: pointer; background: #e8e8ed; box-shadow: var(--apple-shadow-card);
}
@@ -371,8 +372,9 @@
if (!img) return;
const box = img.getAttribute('data-box');
const timestamp = new Date().getTime();
const width = img.offsetWidth || 1200;
const height = img.offsetHeight || 750;
// Portrait tiles: height must always be >= width.
const width = img.offsetWidth || 800;
const height = Math.max(img.offsetHeight || 1200, width);
const newUrl = `/api/images/random/${width}/${height}/?fit=crop&v=${timestamp}&box=${box}`;
const newImg = new Image();
@@ -649,7 +651,7 @@
<div class="tile-grid">
<button type="button" class="image-tile-btn reveal" style="--d: 0;" onclick="refreshRandomImage(this.querySelector('img'))" aria-label="{% trans 'Shuffle image' %}">
<img
src="/api/images/random/1200/750/?fit=crop&v={{ timestamp }}"
src="/api/images/random/800/1200/?fit=crop&v={{ timestamp }}"
alt="{% trans 'Random Image' %}"
data-box="1"
loading="lazy"
@@ -664,7 +666,7 @@
</button>
<button type="button" class="image-tile-btn reveal" style="--d: 1;" onclick="refreshRandomImage(this.querySelector('img'))" aria-label="{% trans 'Shuffle image' %}">
<img
src="/api/images/random/1200/750/?fit=crop&v={{ timestamp }}&offset=1"
src="/api/images/random/800/1200/?fit=crop&v={{ timestamp }}&offset=1"
alt="{% trans 'Random Image' %}"
data-box="2"
loading="lazy"