After exploring the code in Flexslider, it seems that there is no specific exclusion preventing image resizing on vertical window changes. The image resize process appears to be purely CSS-based, feeding width and height information into the JavaScript. It appears that the issue lies in a combination of DOM/CSS problems with browsers not resizing images on vertical window changes, along with potential compatibility issues with FlexSlider.
Getting all browsers to understand 100% vertical layouts without vertical scrolling has always been a bit challenging, as it deviates from the normal layout paradigm. While newer CSS versions have improved this situation somewhat, there can still be discrepancies in how different browsers interpret a 100% layout design.
To tackle this issue, I utilized the slider demo and referenced a stack answer to achieve a successful implementation of a 100% vertical layout. You can view the final result here.
Initially, adjusting the image CSS properties to scale the height while keeping the width auto helped improve the layout's aspect:
width: auto;
height: 90%;
However, additional tweaks were required within the FlexSlider JavaScript to ensure proper handling of the elements. By modifying the CSS values and structure as follows:
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
The slideshow began functioning correctly in Chrome. For Firefox, further adjustments were necessary to apply the 100% height rule consistently across various elements:
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
These modifications resolved the resizing issues for Firefox as well. However, one limitation of this solution is that the resized image may extend beyond the screen's horizontal boundaries, potentially causing display issues. It is advisable to anticipate and address such scenarios to prevent functionality disruptions, especially when utilizing carousel features. Please also note that some quirks may arise during user interactions, such as mouseOut events triggering unexpected horizontal scroll bars.
In conclusion, front-end development can present challenges like these, highlighting the complexities involved in ensuring consistent cross-browser compatibility and responsive design. Despite its intricacies, solving such issues can be rewarding and contribute to a more seamless user experience.
I hope this detailed explanation sheds light on the process behind addressing image resizing in FlexSlider setups. If you encounter any further difficulties or have additional questions, please feel free to reach out. Thank you for your patience and understanding throughout this exploration.