Preserve aspect ratio in debug thumbnails.

react-slideshow/src/App.css

@@ -3,7 +3,7 @@ body, html, #root {
 }
 
 #ui {
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.5);
   bottom: 0;
   line-height: 3em;
   position: 'absolute';

react-slideshow/src/App.tsx

@@ -173,37 +173,42 @@ class Album extends React.Component<AlbumProps, AlbumState> {
         backgroundSize: 'cover',
       };
       let prefetchStyle: React.CSSProperties = {
+        backgroundColor: 'rgba(127, 127, 127, 0.5)',
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        bottom: 0,
+        height: '25%',
         position: 'absolute',
         width: '25%',
-        height: '25%',
-        bottom: 0,
       };
       let leftPrefetchStyle: React.CSSProperties = {
         left: 0,
+        backgroundImage: `url(/api/image/${prevImage.id}?w=${w}&h=${h})`,
         ...prefetchStyle
       };
       let rightPrefetchStyle: React.CSSProperties = {
         right: 0,
+        backgroundImage: `url(/api/image/${nextImage.id}?w=${w}&h=${h})`,
         ...prefetchStyle
       };
       let ui;
       if (showUI) {
+        // TODO(wathiede): set image as background of the div in the style.
         ui = <div id="ui">
-          <img
+          <div
           style={leftPrefetchStyle}
           onClick={(e)=>{
             e.stopPropagation();
             this.setState({idx: prevIdx})
-          }}
+          }}></div>
-          src={`/api/image/${prevImage.id}?w=${w}&h=${h}`} alt="prefetch prev" />
           <div className="meta">{image.filename}</div>
-          <img
+          <div
           style={rightPrefetchStyle}
           onClick={(e)=>{
             e.stopPropagation();
             this.setState({idx: nextIdx})
-          }}
+          }}></div>
-          src={`/api/image/${nextImage.id}?w=${w}&h=${h}`} alt="prefetch next" />
         </div>;
       }
       return <div style={style} onClick={(e)=>{