The Dilemma
I'm currently facing a challenge while using the FlexSlider plugin to create a full-page slider similar to the one on the Suzy Hoodless website. My issue lies in trying to get the images within my slides to stretch and fit 100% of the height.
Progress Update
Fortunately, I was able to find a workaround for this problem with the following code:
Now, my aim is to ensure that the images are centered and cropped equally on ALL sides when the browser window is resized. Any suggestions?
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/kitchen_adventurer_donut.jpg" /></li>
<li><img src="images/kitchen_adventurer_caramel.jpg" /></li>
</ul>
</div>
.flexslider-container, .flexslider .slides, .flex-viewport {
height: 100%;
width: 100%;
}
.flexslider {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.flexslider .slides > li {
width: 100%;
height: 100%;
display: none;
-webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */
}
.flexslider .slides img {
min-width: 100%;
min-height: 100%;
display: block;
}