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

Javascript 基于图像实际宽度的响应div,javascript,jquery,css,Javascript,Jquery,Css,我刚带了一个jquery滑块控件,它说它是有响应的,但在演示版中,它是有响应的,我不知道它是如何响应的,或者是什么使它有响应的,我复制了那里的代码,它只是以固定的宽度放在我的页面中 因此,我知道可以解决此问题的唯一解决方案是获取#seven_容器的父元素宽度,并将其用作窗口的指南。调整控件的大小并更改其宽度和高度属性,例如,seven#u容器可能需要另一个父div来添加和删除内容 var tb=$(".seven_container").superseven({ width:723,

我刚带了一个jquery滑块控件,它说它是有响应的,但在演示版中,它是有响应的,我不知道它是如何响应的,或者是什么使它有响应的,我复制了那里的代码,它只是以固定的宽度放在我的页面中

因此,我知道可以解决此问题的唯一解决方案是获取#seven_容器的父元素宽度,并将其用作窗口的指南。调整控件的大小并更改其宽度和高度属性,例如,seven#u容器可能需要另一个父div来添加和删除内容

var tb=$(".seven_container").superseven({
    width:723,
    height:425
    });
有人知道如何使用图像的实际宽度并计算$('.seven_容器)父对象的纵横比吗

它们的jquery如下所示

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         
});
这是标记

<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> 

上一张幻灯片
下一张幻灯片

仅作为测试。尝试使用此Javascript

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

是的,我试过了,它使用默认设置。我有点困惑。滑块是否在演示中响应,但在您的站点上不响应?至于固定宽度,我假设它是容器的最大宽度,直到窗口到达其边界,然后切换到百分比宽度。