Tip: Maintain Aspect Ratio in Full-Width Slider (except Android…)

I don’t know if this has been addressed/resolved or not. I have searched for maintaining the aspect ratio of my uploaded images in the slider. I was unsuccessful in finding a satisfactory solution.

I was originally using this snippet:
https://www.themesandco.com/snippet/reduce-height-slider/
but was unhappy with the cropping effects and if I unchecked the center slider images option, was unhappy with the white spaces above and below the image.

This is the css code I am currently using after finding this setting elsewhere online:

/* ADJUST THE SLIDER HEIGHT */
#customizr-slider.carousel .item { height: 33vw; min-height: 33vw; line-height: 33vw; }

The value 33vw represents 33% of the width of the browser window, this value will need to be changed based on the particular aspect ratio of the uploaded images that are to be maintained (mine are 1200×400 so height is 1/3 the width).

I have tested it by resizing my browser, using chrome, firefox, and IE11. It appears to be equally responsive as well…only issue is that during active transitioning, it sometimes freezes less than full width, but refreshing fixes it.

Just thought this might be of benefit to others who have tried to achieve this. I am no expert in any of this, so hopefully this doesn’t violate any coding practices and is a suitable solution for everyone who desires to try it.

UPDATE: Tested on Android tablet and smartphone (both JellyBean) and they did not accept this customization…guess it’s back to the drawing board…maybe a javascript solution?