Use <div> for images

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();

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 {

styles/square-img.css

@@ -1,4 +1,6 @@
 .image {
+	background-position: center;
+	background-size: cover;
 	width: 80px;
 	height: 80px;
 }