Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

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.

jquerycssunslider

Answer №1

You can't achieve this using pure CSS alone, but you can do so by utilizing a simple JQuery function like the one shown in this example.

$('document').ready(function(){
  function adjustImageSize(){
    var bannerWidth = $('.banner').width();
    var imageHeight = 450 * bannerWidth/1903;
    $('.banner ul li').css('height', imageHeight.toString());
  }

  adjustImageSize();

  $(window).resize(function(){
    adjustImageSize();
  });

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Jquery Ajax pagination with dynamic content loading

As a newcomer to ajax and jquery, I am currently working on building a search page that will contain numerous records and therefore needs to be paged. While researching tutorials on how to accomplish this task, most examples I found included page numbers d ...

jqueryajaxpagination

Learn how to set up webpack or Next.js to generate a CSS file from custom Material styles and automatically inject it into the header

One of the things I've done is define some custom material styles, like this: import {createStyles, makeStyles, Theme} from '@material-ui/core/styles'; export const useStyles = makeStyles((theme: Theme) => createStyles({ fab ...

cssreactjswebpackmaterial-uinext.js

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

javascripthtmlcssajaxgoogle-maps

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

I am in the process of developing a plugin/bookmarklet that is designed to extract an XML document from the <textarea> element on a web page, make modifications to the XML content, and then reinsert the updated version back into the <textarea> ...

javascriptjqueryhtmlxmlcdata

Create a container-fluid design in Bootstrap with various colors

I am aiming to create a design with a fluid container featuring different background colors on each side, separated by two columns within the container. I have visualized it in this image - do you think it is feasible? https://i.stack.imgur.com/KRc2Q.pn ...

htmlcsstwitter-bootstrap

Remove the initialization of the jQuery UI portlet

I am currently utilizing the jQuery UI Portlet and I am in need of the portlets being initialized as droppable. Currently, when the page loads, the portlets collapse by default. Appreciate your assistance. ...

jqueryjquery-uiportlet

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

javascriptjquerycsssvgpath

Using CSS grid for optimal responsive design

Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices. Below is an example that functions perfectly on a desktop screen ...

htmlcssmedia-queriescss-grid

Vue.js: click event does not trigger transform animation

I am facing a challenge with rotating an arrow icon within a dropdown menu. Despite my efforts, the rotation does not synchronize with the appearance of the dropdown menu. Here is the Vue component code snippet: <nav> <section class= ...

javascriptcssanimationvue.jsrotation

Uniform Height for Several Selectors

I came across a script on Codepen created by RogerHN and decided to customize it for a project I'm currently working on: https://codepen.io/RogerHN/pen/YNrpVa The modification I made involved changing the selector: var matchHeight = function ...

javascriptjquery

What advantages does event delegation in JavaScript offer compared to using jQuery's event handling?

Vanilla JavaScript: parentNode.addEventListener("click", function(event) { if (event.target === childNode) { code here } }); versus jQuery: $(parentNode).on("click", childNode, function() {}); ...

javascriptjqueryperformance

Exploring search results using dynamic multiple dropdown lists in PHP

Be sure to check out this interesting link: There are six drop down boxes available on the page. These include options for STATE, DISTRICT, LOCATION, MEDICINE, SPECIALTY, and GRADE. I successfully retrieved all the necessary data from the SQL database to ...

phpjquerymysqlajax

Attempting to align two div blocks side by side to occupy the entire page

http://jsfiddle.net/UeLMA/1/ Here's the HTML code snippet: <div id="left" style="background: red; display: inline-block; float: left"> aaaa<br /> aaaaa </div> <div id="right" style="background: yellow; float: left">&l ...

jqueryhtmlcss

The Bootstrap Jumbotron section stubbornly stays above the footer

I'm currently working on a Bootstrap 3 page and facing an issue where the yellow area does not seamlessly transition into the green footer. Instead, there is a white space between the end of the yellow area and the start of the footer. How can I resol ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Refreshing the page following a jquery ajax request results in script malfunction in Firefox

I'm currently in the process of developing a system that updates the language on a website after a user clicks on an item. The functionality works smoothly on Chrome and Internet Explorer, both on desktop (Windows 8.1) and mobile devices. However, whe ...

phpjqueryajaxfirefoxsession-variables

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

htmlcss

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

javascriptcsswebpackvue.jshtml-webpack-plugin

The system of jQuery Dialog UI is unable to recognize when the close icon is clicked

How can I detect if a user closes my dialog modal box using the 'X' button in the upper-right corner of the titlebar? I've been struggling to find a solution while using jQuery's Dialog UI plugin. Here is what I have tried so far: $(&a ...

jqueryjquery-uieventsjquery-ui-dialog

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress

customizable path settings for sprites using css

Currently, I have a situation where I am using many sprites in my CSS file, and all the image locations are hardcoded within the CSS itself. Now, I am considering moving all these images to a CDN. The problem is that it's quite cumbersome to change th ...

pythoncssdjango