From 54cb9ab1526c0638b6c89504700289f70c5b3ca7 Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Wed, 24 Nov 2021 18:47:07 +0100
Subject: [PATCH] fix images' size and ratio

---
 app/frontend/src/stylesheets/app.components.scss         | 4 +++-
 app/frontend/src/stylesheets/application.scss            | 2 ++
 .../src/stylesheets/modules/machines/machine-card.scss   | 4 ++--
 app/frontend/src/stylesheets/overrides.scss              | 9 +++++++++
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 app/frontend/src/stylesheets/overrides.scss

diff --git a/app/frontend/src/stylesheets/app.components.scss b/app/frontend/src/stylesheets/app.components.scss
index bd315443e..c25d488de 100644
--- a/app/frontend/src/stylesheets/app.components.scss
+++ b/app/frontend/src/stylesheets/app.components.scss
@@ -243,8 +243,10 @@
 
     &.picture {
       height: 250px;
-      background-size: cover;
+      background-size: contain;
       background-position: center;
+      background-repeat: no-repeat;
+      background-color: transparent;
 
       @include transition(opacity 0.5s ease);
 
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index fb8e6a6f3..575b80248 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -70,3 +70,5 @@
 @import "modules/subscriptions/renew-modal";
 
 @import "app.responsive";
+
+@import "overrides"
diff --git a/app/frontend/src/stylesheets/modules/machines/machine-card.scss b/app/frontend/src/stylesheets/modules/machines/machine-card.scss
index 87de4d5b2..4b0033439 100644
--- a/app/frontend/src/stylesheets/modules/machines/machine-card.scss
+++ b/app/frontend/src/stylesheets/modules/machines/machine-card.scss
@@ -51,13 +51,13 @@
 
   .machine-picture {
     height: 250px;
-    background-size: cover;
+    background-size: contain;
     background-position: center;
+    background-repeat: no-repeat;
     transition: opacity 0.5s ease;
     cursor: pointer;
     padding: 0;
     color: #333333;
-    background-color: #f5f5f5;
     border-color: #ddd;
     border-bottom: 1px solid transparent;
     border-top-left-radius: 5px;
diff --git a/app/frontend/src/stylesheets/overrides.scss b/app/frontend/src/stylesheets/overrides.scss
new file mode 100644
index 000000000..1d1466f06
--- /dev/null
+++ b/app/frontend/src/stylesheets/overrides.scss
@@ -0,0 +1,9 @@
+.carousel {
+  &-inner {
+      aspect-ratio: 16/9;
+    }
+  
+  &-inner > .item {
+    height: 100%;
+  }
+}
\ No newline at end of file