🖼️ Move card image to background to fix drag issue.

Author: mxbaylee

src/components/Card.tsx

@@ -122,17 +122,21 @@ export const Card = (props: CardProps) => {
         '--idx': String(dataIdx),
       } as CSSProperties}
     >
-      <img
+      <div
         onMouseDown={handleMouseDown}
-        className="card-back"
-        alt={card.name}
-        src={`/assets/cards/${CardType[card.type].toLowerCase()}_back.jpg`}
+        className="card-img card-back"
+        title={card.name}
+        style={{
+          backgroundImage: `url(/assets/cards/${CardType[card.type].toLowerCase()}_back.jpg)`
+        }}
       />
-      <img
+      <div
         onMouseDown={handleMouseDown}
-        className="card-front"
-        alt={card.name}
-        src={`/assets/cards/md/${card.name}.jpg`}
+        className="card-img card-front"
+        title={card.name}
+        style={{
+          backgroundImage: `url(/assets/cards/md/${card.name}.jpg)`
+        }}
       />
       <span className="title">{(card.display || card.name).toUpperCase()}</span>
       <div

src/components/css/Card.css

@@ -98,13 +98,15 @@
   text-align: center;
 }
 
-.card img {
+.card .card-img {
   border-radius: 1em;
   width: calc(var(--card-ratio) * var(--card-width));
+  height: calc(var(--card-ratio) * var(--card-height));
+  background-size: 100%;
 }
 
-.card.front img.card-back,
-.card.back img.card-front,
+.card.front .card-back,
+.card.back .card-front,
 .card:not(:last-child) span.title,
 .card:not(:last-child) img {
   display: none;