My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
fix: fit media images to square aspect ratio in Firefox
I was previously relying on the implicit `max-width` value set by
Tailwind's Preflight normalisation, which doesn't seem to be liked by
Firefox which appears to require a `width` to be set specifically.
+2
-2
server/templates/media.html
+2
-2
server/templates/media.html
···
4
4
class="peer/{{ media_type }} relative aspect-square max-h-50 justify-self-center hoverable:max-h-none"
5
5
>
6
6
<img
7
-
class="absolute inset-0 aspect-square rounded-xs object-fill"
7
+
class="absolute inset-0 aspect-square w-full rounded-xs object-fill"
8
8
aria-hidden="true"
9
9
src="{{ media.image }}"
10
10
/>
11
11
<img
12
-
class="relative aspect-square rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
12
+
class="relative aspect-square w-full rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
13
13
src="{{ media.image }}"
14
14
alt="Cover art for {{ media.name }}"
15
15
/>