From 1d05ef7a3c2f0db375ea8ee74493f351dd2baee7 Mon Sep 17 00:00:00 2001
From: agatemosu <agaatem@outlook.com>
Date: Mon, 22 Jul 2024 17:17:07 +0200
Subject: [PATCH] Use `<div>` for images

---
 script.js             | 13 ++++++++++---
 styles.css            | 20 +++++++++++++-------
 styles/square-img.css |  2 ++
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/script.js b/script.js
index ce1caaf..9e47708 100644
--- a/script.js
+++ b/script.js
@@ -188,11 +188,18 @@ function selectImages() {
 
 function uploadImages(files) {
 	for (const file of files) {
-		const image = document.createElement("img");
+		const image = new Image();
 		image.src = URL.createObjectURL(file);
-		image.className = "image";
 
-		imagesBar.appendChild(image);
+		const imageEl = document.createElement("div");
+		imageEl.classList.add("image");
+		imagesBar.appendChild(imageEl);
+
+		image.onload = () => {
+			imageEl.style.aspectRatio = `${image.width} / ${image.height}`;
+			imageEl.style.backgroundImage = `url("${image.src}")`;
+			imageEl.style.minHeight = `${Math.min(image.height, 80)}px`;
+		};
 	}
 
 	initializeDragula();
diff --git a/styles.css b/styles.css
index f2307e0..ca4eafc 100644
--- a/styles.css
+++ b/styles.css
@@ -26,7 +26,7 @@ body {
 
 .tier-label {
 	position: relative;
-	min-height: 85px;
+	min-height: 80px;
 	width: 100px;
 	display: flex;
 	align-items: center;
@@ -92,6 +92,12 @@ p {
 	text-align: center;
 }
 
+.sort {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 2px;
+}
+
 .tier {
 	flex-grow: 1;
 	background-color: var(--tier-bg);
@@ -130,6 +136,7 @@ p {
 
 .option img {
 	transition: ease 100ms;
+	cursor: pointer;
 }
 
 .option img:hover {
@@ -184,14 +191,13 @@ label::before {
 	margin-right: 5px;
 }
 
-img {
-	cursor: pointer;
-}
-
 .image {
+	display: inline-flex;
+	vertical-align: top;
+	cursor: pointer;
+	background-size: contain;
+	background-repeat: no-repeat;
 	max-height: 80px;
-	margin-left: 2px;
-	object-fit: cover;
 }
 
 #images-bar {
diff --git a/styles/square-img.css b/styles/square-img.css
index d9b86b3..c85a89b 100644
--- a/styles/square-img.css
+++ b/styles/square-img.css
@@ -1,4 +1,6 @@
 .image {
+	background-position: center;
+	background-size: cover;
 	width: 80px;
 	height: 80px;
 }