From 0e45ce2ea046068de8d792e653497dae5433ae77 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 9 Sep 2020 23:10:13 +0200 Subject: carousel image sizing --- .../views/viewer/player/components.media/media.css | 25 +++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'animism-align/frontend/app/views/viewer/player/components.media/media.css') 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%; -- cgit v1.2.3-70-g09d2