@Bwise Thanks again for the help!
I remade this whole swinger.js contraption outside of laytheme to find the best way to make it adapt to different browser sizes.
This is the css now and it seems to work quite well:
div.swinger-container {
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
now I'm off to figuring out how to add the caption to the images, which is a whole other thing (if you have any idea please let me know). On stackoverflow someone suggested using a title attribute in the img scr and adjusting the jquery to display this.
But it seems to limit styling and position of the text (afaik)