I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below:
The background image scales proportionally to fit the width of the screen, but the actual li element remains fixed in height and does not adjust, resulting in the gap as shown in the image.
Below is the HTML code for setting up the slider:
<div class="banner" style="overflow: hidden; width: 1904px; height: 450px;">
<ul style="width: 300%; position: relative; left: -200%; height: 450px;">
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-02.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-01.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-03.jpg); background-size: 100%;"></li>
</ul>
</div>
And here is the corresponding CSS:
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li {
float: left;
height: 450px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
I have tried experimenting with min-height and max-height properties but haven't found an ideal solution. Setting the height is crucial to prevent the collapsing of the li elements. While using background-size:cover seems like a good option, it results in poor image scaling on narrow screens.
To resolve this issue, I believe finding a way to set the height of the li element in proportion to the background images is necessary. Is there a CSS approach to achieve this, or would scripting be required? I came across this article suggesting the utilization of padding-top:x% to "set" the height, but I fear this method might create complications due to dynamic changes in the slider's width based on the number of slides present.