I have a simple jquery image slider placed in a responsive container. The slider is working responsively, however the height is set in pixels which looks good at its maximum viewport width, but as you can imagine leaves way too much distance between slider and content at smaller viewport widths.

I am wondering if there is a simple way using CSS or jQuery to dynamically set the height of the div containing the image slider so that it looks good for all viewport widths.

the jQuery:

        function slideSwitch() {
            var $active = $('#slideshow DIV.active');

            if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

            var $next =  $active.next().length ? $active.next()
                : $('#slideshow DIV:first');

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }

        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });

the CSS:

        .responsive-container {
            width: 80%;
            margin: 0 auto;
        }

        .responsive {
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }

        #slideshow {
            position:relative;
            height: 60%;
        }

        #slideshow div {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
            background-color: #FFF;
        }

        #slideshow div.active {
            z-index:10;
            opacity:1.0;
        }

        #slideshow div.last-active {
            z-index:9;
        }

        #slideshow div img {
            display: block;
            border: 0;
            margin-bottom: 10px;
        }

the HTML:

<div id="slideshow" class="responsive-container">
    <div class="active">
        <img class="responsive" src="img/slider/image1.jpg" alt="Slideshow Image 1" />  
    </div>

    <div>
        <img class="responsive" src="img/slider/image2.jpg" alt="Slideshow Image 2" />
    </div>

    <div>
        <img class="responsive" src="img/slider/image3.jpg" alt="Slideshow Image 3" />
    </div>                            
</div>

Is there a way to dynamically add height to:

<div id="slideshow" class="responsive-container">

I don't know if it matters but the max image size is: 531px width x 400px height.

I have a simple jquery image slider placed in a responsive container. The slider is working responsively, however the height is set in pixels which looks good at its maximum viewport width, but as you can imagine leaves way too much distance between slider and content at smaller viewport widths.

I am wondering if there is a simple way using CSS or jQuery to dynamically set the height of the div containing the image slider so that it looks good for all viewport widths.

the jQuery:

        function slideSwitch() {
            var $active = $('#slideshow DIV.active');

            if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

            var $next =  $active.next().length ? $active.next()
                : $('#slideshow DIV:first');

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }

        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });

the CSS:

        .responsive-container {
            width: 80%;
            margin: 0 auto;
        }

        .responsive {
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }

        #slideshow {
            position:relative;
            height: 60%;
        }

        #slideshow div {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
            background-color: #FFF;
        }

        #slideshow div.active {
            z-index:10;
            opacity:1.0;
        }

        #slideshow div.last-active {
            z-index:9;
        }

        #slideshow div img {
            display: block;
            border: 0;
            margin-bottom: 10px;
        }

the HTML:

<div id="slideshow" class="responsive-container">
    <div class="active">
        <img class="responsive" src="img/slider/image1.jpg" alt="Slideshow Image 1" />  
    </div>

    <div>
        <img class="responsive" src="img/slider/image2.jpg" alt="Slideshow Image 2" />
    </div>

    <div>
        <img class="responsive" src="img/slider/image3.jpg" alt="Slideshow Image 3" />
    </div>                            
</div>

Is there a way to dynamically add height to:

<div id="slideshow" class="responsive-container">

I don't know if it matters but the max image size is: 531px width x 400px height.

• javascript
• jquery
• html
• css
• responsive-design

• 1 do you want to add the height at certain point or whenever resize happens? – David Chase Commented Mar 4, 2013 at 18:01
• I want to set the height based on the height of the image. – Raphael Rafatpanah Commented Mar 4, 2013 at 18:12
• And, the height of the image is determined by the viewport width. – Raphael Rafatpanah Commented Mar 4, 2013 at 18:13

1 Answer 1

Discrete Height Transitions

CSS Media queries would allow you to set discrete widths at which the height changes.

@media (max-width: 979px) and (min-width: 768px) {
  #slideshow {
    height: whatever;
  }
}

For an example of how these work (if you're unfamiliar with them) resize your browser on the CSS Tricks website (see the above link). You'll see the layout change when you reach certain widths. That's media queries in action.

Continuous Height Transitions

For continuous height transitions, you'll need to turn to Javascript. Here's a little jQuery setup that might help you get started. View it on JSFiddle.

javascript

$(window).resize(function(){
  winWidth = $(window).width();
  $("#resize").height(winWidth*.3);
});