基于图像实际宽度的响应div

Question

I just brought a jquery slider control and it said it was responsive, but in the demo's it's responsive I just can't figure out how or what makes it responsive and I copied there code and it just sits in my page at a fixed width.

So my only solution I know that could remedy this problem is get the parent element width of the #seven_container and use that as a guide on window.resize and change the properties of width and height for the control eg .seven_container might need another parent div to add and remove the content

var tb=$(".seven_container").superseven({
    width:723,
    height:425
    });

Does anyone know how to use actual width of an image and calculate aspect ratio of the $('.seven_container') parent

They jquery is as follows

var tb=$(".seven_container").superseven({
    width:723,
    height:425,
    autoplay:true,
    interval:5,
    fullwidth:false,
    responsive:true,
    progressbar:true,
    swipe:true,
    keyboard:false,
    scrollmode:false,
    animation:0,
    navtype:0,
    repeat_mode:true,
    skin:'default',
    lightbox:true,
    pause_on_hover:true         
});

and here is the markup

<div class="seven_container">
    <div id="seven_viewport">
        <div class="seven_slider">
             <div class="seven_slide" image-src="images/vivo_slider/make_me_over_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/regrowth_color_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/global_color_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/half_head_foils_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/balayage_color_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/highlights_color_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/full_heads_foil_package.png"></div>
             <div class="seven_slide" image-src="images/vivo_slider/new_client_hair_offer_package.png"></div> 
        </div> 
    </div>
    <a id="left_btn" class="seven_nav">Previous Slide</a>
    <a id="right_btn" class="seven_nav right_btn">Next Slide</a>
</div> 

Answer 1

Simply as a test. Try using this Javascript instead.

$(document).ready(function(){
var tb=$(".seven_container").superseven({
    width:774,
    height:436,
    caption_animation: 2,
        fullwidth:true,
        animation:0,
        autoplay:true,
        interval:3,
        progressbar:true,
        progressbartype:"linear",
        bullet:true,
        thumbnail:false,
        repeat_mode:true,
        responsive:true,
        swipe:true,
        keyboard:true,
        skin:"clean",
        lightbox:true
    });
});