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

Share Improve this question Follow edited Mar 4, 2013 at 19:33 jamesplease 12.9k66 gold badges5050 silver badges7777 bronze badges asked Mar 4, 2013 at 17:59 Raphael RafatpanahRaphael Rafatpanah 20.1k2828 gold badges105105 silver badges174174 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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);
});