Merge pull request #23 from petergeorgas/feature/preserve_image_aspec…

…t_ratio Preserve aspect ratio
petergeorgas · Oct 29, 2021 · 6c72158 · 6c72158
2 parents 0b6dda7 + 3b0bf4f
commit 6c72158
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/App.css b/src/App.css
@@ -51,11 +51,21 @@
   border-radius: 12px;
 }
 
+.image-div {
+  display: flex;
+  width: 350px;
+  height: 220px;
+  justify-content: center;
+  align-items: center;
+}
+
 #uploaded-img {
+  max-width: 350px;
+  max-height: 220px;
+  border-radius: 12px;
   border-radius: 12px;
   border: 2px solid #97bef4;
   box-sizing: border-box;
-  border-radius: 12px;
   margin-bottom: 0;
 }
 

diff --git a/src/App.js b/src/App.js
@@ -161,16 +161,10 @@ function App() {
                 </div>
               </div>
             ) : (
-              <div>
+              <div className="image-div">
                 <div {...getRootProps()}>
                   <input {...getInputProps()} />
-                  <img
-                    id="uploaded-img"
-                    src={file}
-                    width={350}
-                    height={220}
-                    alt="Uploaded image"
-                  />
+                  <img id="uploaded-img" src={file} alt="Uploaded image" />
                 </div>
               </div>
             )}

diff --git a/src/components/Success.js b/src/components/Success.js
@@ -23,13 +23,12 @@ function Success(props) {
         <div className="flex-container-inner">
           <img src={cloud_done} className="success-icon" alt="success icon" />
           <h2 className="box-header">Upload successful.</h2>
-          <div>
+          <div className="image-div ">
             <img
               id="uploaded-img"
               src={imgUrl}
-              width={350}
-              height={220}
               alt="uploaded image from cloud"
+              style={{ marginBottom: "20px" }}
             />
           </div>
           <div className="link-box">