Merge pull request #6829 from owncloud/fix-space-projects-aspect-ratio

Design polishing: Set a fixed aspect ratio for spaces image
owncloud · May 3, 2022 · 1985fa5 · 1985fa5
2 parents f0ed9bd + b4ff8b7
commit 1985fa5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/changelog/unreleased/enhancement-fixed-aspect-ratio-spaces-image b/changelog/unreleased/enhancement-fixed-aspect-ratio-spaces-image
@@ -0,0 +1,7 @@
+Enhancement: Fixed aspect ratio for spaces images
+
+We've set the spaces images to a fixed aspect ratio to make
+sure that the same part of the image is always displayed.
+
+https://github.com/owncloud/web/pull/6829
+https://github.com/owncloud/web/issues/6555
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -285,8 +285,7 @@ export default defineComponent({
   }
 
   .oc-card-media-top {
-    width: 100%;
-    height: 150px;
+    aspect-ratio: 16/9;
   }
 
   .oc-card-media-top a {
@@ -302,7 +301,7 @@ export default defineComponent({
 
   .space-image {
     width: 100%;
-    height: 150px;
+    aspect-ratio: 16/9;
     object-fit: cover;
   }
 
@@ -317,5 +316,9 @@ export default defineComponent({
   .space-disabled-indicator {
     z-index: 999;
   }
+
+  .spaces-list-projects {
+    aspect-ratio: 16/9;
+  }
 }
 </style>