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

我刚刚带来了一个jQuery滑块控件，它表示它是响应式的，但在演示中它是响应式的，我只是不知道如何或什么使它响应，我复制了代码和它只是以固定的宽度坐在我的页面中。基于图像实际宽度的响应div

所以我唯一能解决这个问题的方法是获得#seven_container的父元素宽度，并将其用作window.resize的指南，并更改控件的宽度和高度属性。 .seven_container可能需要另一个家长的div添加和删除内容

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

有谁知道如何使用图像的实际宽度和计算$的纵横比（“ seven_container”）母公司

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

来源

2014-01-27 ONYX

是的我试过了，它使用它的默认设置。 – ONYX

我有点困惑。滑块是否在演示中响应，但不在您的网站上？至于固定宽度，我认为它是容器的最大宽度，直到窗口到达边界，然后切换到百分比宽度。 – harrypujols

仅作为测试。请尝试使用此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 
    }); 
});

来源

2014-01-28 01:55:20

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

回答

相关问题