How I wanted the Flexslider to act was to have a fixed size container, and then resize the images, not the container, to match my height constraint. If you are having trouble understanding what I mean, perhaps an example of default vs desired behavior is the best way to illustrate my issue:
- Image 1: 300 x 200 px
- Image 2: 300 x 400 px
- Image 3: 300 x 200 px
- Image 4: 300 x 200 px
- The slider starts with a height of 200px, based on the first slide. When it gets to slide 2, it dynamically changes the container (<div class="flex-container">) to have a height of 400px, which shoves/bumps all the content below the slider down by 200px from where it just was.
- Here is a demo of this default behavior:
- The slider container is constrained to a height of my choosing, in this example, I might pick a max-height of 200px, since that lets 3 out of the 4 images display at full size, and only negatively affects 1 image. On slide 2, the container should stay the same height, but instead of cropping (e.g. overflow:none) or squishing (e.g. setting img height to match container and disregarding aspect ratio), it should keep the aspect ratio and downscale the image to fit.