carousel image sizing

1 files changed, 24 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index a119dfb..cb15150 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -104,9 +104,32 @@
   height: calc(100vh - 9rem);
 }
 .carousel-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.carousel-item .image-container {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  max-height: calc(100vh - 10rem);
   background-size: contain;
-  background-position: center center;
   background-repeat: no-repeat;
+  background-position: center center;
+}
+.carousel-item img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100vh - 10rem);
+  opacity: 0;
+  pointer-events: none;
+  /*object-fit: contain;*/
+}
+.carousel-item .speaker-icon {
+  bottom: 0;
+  right: 0;
+  opacity: 1;
 }
 .player-transcript .carousel-item {
   height: 100%;