resizing when displaying images

src/App.scss

@@ -114,7 +114,7 @@ video {
         margin-bottom: 10px;
     }
     &__form {
-        height: 96vh;
+        height: 98vh;
         padding-right: calc(10vw + 25px);
     }
     .login-form {
@@ -416,14 +416,20 @@ video {
         overflow: auto;
         height: 100%;
         background-color: rgb(87, 87, 87);
+        .Post__dots.slick-dots {
+            bottom: 12px;
+        }
+    }
+    &__wrapper-img {
+        height: 550px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         img {
             max-width: 100%;
-            max-height: 600px;
+            height: 100%;
             margin: 0 auto;
-            object-fit: cover;
-        }
-        .Post__dots.slick-dots {
-            bottom: 12px;
+            object-fit:cover;
         }
     }
     &__description {
@@ -450,7 +456,7 @@ video {
         height: 100%;
     }
     &__comments {
-        max-height: 350px;
+        max-height: 300px;
         overflow: auto;
     }
     &__comment-edit {
@@ -706,7 +712,7 @@ video {
 }
 
 @media (max-width: 560px) {
-        .Authorization {
+    .Authorization {
         background-position: center top;
         &__form {
             padding-right: 20px;

src/components/main/postsFeed/PostImage.jsx

@@ -52,13 +52,15 @@ class PostImage extends React.Component {
                         <button onClick={() => this.handleNext()}
                             className={`Post__next Post__btn ${this.state.moveNext ? '--active' : ''}`}><RightCircleOutlined /></button>
                     </MediaQuery>
+                    <div className="PostOne__wrapper-img">
+                        {videoRegExp.test(i.originalFileName)
+                            ? <video controls loop preload="true" height="500">
+                                <source src={backURL + '/' + i.url} />
+                            </video>
+                            : <img src={backURL + '/' + i.url} />
+                        }
+                    </div>
 
-                    {videoRegExp.test(i.originalFileName)
-                        ? <video controls loop preload="true" height="500">
-                            <source src={backURL + '/' + i.url} />
-                        </video>
-                        : <img src={backURL + '/' + i.url} />
-                    }
                 </div>
                     : <Empty key={i._id} image={nodata} description={false} />)
                     : <Empty image={nodata} description={false} />