From ae2ad4a2b31ef898a1332009750c140c109b595d Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Wed, 24 Mar 2021 16:50:43 +0100
Subject: [PATCH] yet improved display of different aspect ratios, prefer to
 cut away sides rather than top/bottom

---
 style.css    | 47 ++++++++++++++++++++++++-----------------------
 thumbnail.sh |  2 +-
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/style.css b/style.css
index 168ff40..930c987 100644
--- a/style.css
+++ b/style.css
@@ -59,11 +59,12 @@ body {
 }
 
 .itemlist .list img {
-  width: 1000%; height: 11em;
+  -width: 1000%; height: 11em;
   max-width: unset;
   background-color: #111;
-  object-fit: fill;
-  transform: translate(-00%, 0);
+  object-fit: cover;
+  transform: translate(-05%, 0);
+  margin-left: 50%;
 }
 .itemlist .list img:hover {
   animation-name: thumbscroll;
@@ -71,26 +72,26 @@ body {
   animation-iteration-count: infinite;
 }
 @keyframes thumbscroll {
-   0%   { transform: translate(-00%, 0); }
-   9.99% { transform: translate(-00%, 0); }
-  10%   { transform: translate(-10%, 0); }
-  19.99% { transform: translate(-10%, 0); }
-  20%   { transform: translate(-20%, 0); }
-  29.99% { transform: translate(-20%, 0); }
-  30%   { transform: translate(-30%, 0); }
-  39.99% { transform: translate(-30%, 0); }
-  40%   { transform: translate(-40%, 0); }
-  49.99% { transform: translate(-40%, 0); }
-  50%   { transform: translate(-50%, 0); }
-  59.99% { transform: translate(-50%, 0); }
-  60%   { transform: translate(-60%, 0); }
-  69.99% { transform: translate(-60%, 0); }
-  70%   { transform: translate(-70%, 0); }
-  79.99% { transform: translate(-70%, 0); }
-  80%   { transform: translate(-80%, 0); }
-  89.99% { transform: translate(-80%, 0); }
-  90%   { transform: translate(-90%, 0); }
- 100%   { transform: translate(-90%, 0); }
+   0%    { transform: translate(-05%, 0); }
+   9.99% { transform: translate(-05%, 0); }
+  10%    { transform: translate(-15%, 0); }
+  19.99% { transform: translate(-15%, 0); }
+  20%    { transform: translate(-25%, 0); }
+  29.99% { transform: translate(-25%, 0); }
+  30%    { transform: translate(-35%, 0); }
+  39.99% { transform: translate(-35%, 0); }
+  40%    { transform: translate(-45%, 0); }
+  49.99% { transform: translate(-45%, 0); }
+  50%    { transform: translate(-55%, 0); }
+  59.99% { transform: translate(-55%, 0); }
+  60%    { transform: translate(-65%, 0); }
+  69.99% { transform: translate(-65%, 0); }
+  70%    { transform: translate(-75%, 0); }
+  79.99% { transform: translate(-75%, 0); }
+  80%    { transform: translate(-85%, 0); }
+  89.99% { transform: translate(-85%, 0); }
+  90%    { transform: translate(-95%, 0); }
+ 100%    { transform: translate(-95%, 0); }
 }
 
 .itemlist .list label {
diff --git a/thumbnail.sh b/thumbnail.sh
index 3c486c7..835175e 100644
--- a/thumbnail.sh
+++ b/thumbnail.sh
@@ -29,7 +29,7 @@ gen_thumb(){
     printf '' \
     | mplayer -input nodefault-bindings -nosound -benchmark \
               -noconfig all -really-quiet \
-              -vf scale=320:-2,tile=10:1:10:0:0 \
+              -vf scale=320:-2,expand=:::::16/9,tile=10:1:10:0:0 \
               -vo jpeg:quality=85:outdir="${tmp}"\
               "mf://$tmp/_*.jpg" 2>&-
   
-- 
2.39.2