Center image icons in attachment previews instead of stretching them

web/sass-files/sass/partials/_files.scss

@@ -71,48 +71,45 @@
   width:300px;
   height:300px;
 }
+
+@mixin file-icon($path) {
+  background: url($path);
+  background-position: center;
+  background-repeat: no-repeat;
+  @include background-size(auto 100%);
+}
 .file-icon {
   width: 100%;
   height: 100%;
   &.audio {
-    background: url("../images/icons/audio.png");
+    @include file-icon("../images/icons/audio.png");
-    @include background-size(100% 100%);
   }
   &.video {
-    background: url("../images/icons/video.png");
+    @include file-icon("../images/icons/video.png");
-    @include background-size(100% 100%);
   }
   &.ppt {
-    background: url("../images/icons/ppt.png");
+    @include file-icon("../images/icons/ppt.png");
-    @include background-size(100% 100%);
   }
   &.generic {
-    background: url("../images/icons/generic.png");
+    @include file-icon("../images/icons/generic.png");
-    @include background-size(100% 100%);
   }
   &.code {
-    background: url("../images/icons/code.png");
+    @include file-icon("../images/icons/code.png");
-    @include background-size(100% 100%);
   }
   &.excel {
-    background: url("../images/icons/excel.png");
+    @include file-icon("../images/icons/excel.png");
-    @include background-size(100% 100%);
   }
   &.word {
-    background: url("../images/icons/word.png");
+    @include file-icon("../images/icons/word.png");
-    @include background-size(100% 100%);
   }
   &.pdf {
-    background: url("../images/icons/pdf.png");
+    @include file-icon("../images/icons/pdf.png");
-    @include background-size(100% 100%);
   }
   &.patch {
-    background: url("../images/icons/patch.png");
+    @include file-icon("../images/icons/patch.png");
-    @include background-size(100% 100%);
   }
   &.image {
-    background: url("../images/icons/image.png");
+    @include file-icon("../images/icons/image.png");
-    @include background-size(100% 100%);
   }
 }
 .post-image__column {