From 68c83d2f5fc55e2bffe83713609e289f9811e809 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Sat, 28 Sep 2024 21:06:51 +1000
Subject: [PATCH] add object-fit-cover to img elements

---
 assets/views/artwork.jet.html | 6 +++---
 assets/views/tag.jet.html     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/views/artwork.jet.html b/assets/views/artwork.jet.html
index 5fceb89..588c861 100644
--- a/assets/views/artwork.jet.html
+++ b/assets/views/artwork.jet.html
@@ -12,7 +12,7 @@
     <div class="card-header px-4 py-3">
       <div class="d-flex justify-content-between align-items-center">
         <a class="text-decoration-none text-light d-flex align-items-center" href="/users/{{ .Illust.User.ID }}">
-          <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle me-2" style="width: 48px; height: 48px;">
+          <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle object-fit-cover me-2" style="width: 48px; height: 48px;">
           <h2 class="h5 m-0">Other works by {{ .Illust.User.Name }}</h2>
         </a>
         {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
@@ -53,7 +53,7 @@
             <!-- Comment author avatar image -->
             <div class="col-auto">
               <a href="/users/{{ .AuthorID }}">
-                <img class="rounded-circle img-fluid" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
+                <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
               </a>
             </div>
             <div class="col">
@@ -73,7 +73,7 @@
               <!-- Stamp or emoji -->
               <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
               {{- if .Stamp }}
-              <img class="img-fluid rounded me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
+              <img class="img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
                 alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px;" />
               {{- else }}
               <!-- Comment with emojis -->
diff --git a/assets/views/tag.jet.html b/assets/views/tag.jet.html
index c2e5b3c..3b6484b 100644
--- a/assets/views/tag.jet.html
+++ b/assets/views/tag.jet.html
@@ -10,7 +10,7 @@
         {{- if .Tag.Metadata.ID }}
         <div class="col-md-3">
           <a href="/artworks/{{ .Tag.Metadata.ID }}">
-            <img src="{{ .Tag.Metadata.Image }}" alt="{{ .Tag.Name }}" class="img-fluid rounded" />
+            <img src="{{ .Tag.Metadata.Image }}" alt="{{ .Tag.Name }}" class="img-fluid object-fit-cover rounded" />
           </a>
         </div>
         {{- end }}