Slideshows do not have any built-in sizing options. The width of the slideshow is based on your theme’s content width, and the max-height is set to 410px. The images then scale automatically to fit within those constraints.
However, you can use some custom CSS to modify the height. This approach is a little “hacky” but it might be worth trying.
To start, use the following to scale down your images:
.jetpack-slideshow .slideshow-slide img {
max-height: 200px !important;
}
Then you would need to modify a couple of the parent elements to compensate for the change in height:
.jetpack-slideshow {
height: 200px !important;
}
.jetpack-slideshow .slideshow-slide {
line-height: 200px !important;
}
Like I said, it’s a little hacky so I can’t guarantee cross-browser support. But hopefully that helps!
Please don’t hesitate to let me know if you have any other questions, or if you’d like me to elaborate on anything,
I actually found the line-height didn’t need to be changed, but the other two changes were necessary.
Can I suggest that this 410px default height be made customizable without CSS? Would be great to add an option. Google searches show this is a relatively common question.
#gallery-9415-1-slideshow,
#gallery-9415-1-slideshow, .slideshow-slide img {
height: 490px !important;
}
.jetpack-slideshow .slideshow-slide img {
max-height:510px !important;
}
it totally works on large screens, but breaks everything on mobile. Gallery looks stretched. Is there any solution? Page is – http://www.coma.lv/photo/wedding/
