Fatal编程技术网

Javascript Jssor图像也放大了

javascript jquery

Javascript Jssor图像也放大了,javascript,jquery,slider,jssor,Javascript,Jquery,Slider,Jssor,我正在使用创建一个图像滑块。我将$FillMode设置为4，这样图像就可以放入容器中，但它不起作用。这是其中一幅图像的外观： 所以我尝试了其他模式，没有看到任何变化 这是我的密码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>

我正在使用创建一个图像滑块。我将$FillMode设置为4，这样图像就可以放入容器中，但它不起作用。这是其中一幅图像的外观：

所以我尝试了其他模式，没有看到任何变化

这是我的密码：

<!DOCTYPE html> 
<html> 
    <head>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.utils.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head> 

<body> 
    <div id="main">
       <h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
        <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script>
</div>
    </div> 
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 4,
        };                            
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales
        //while window resizes
        function ScaleSlider() {
            var parentWidth = $('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider after document ready
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>


向右滑动表示是，向左滑动表示否。
jssor_滑块1_启动器（“滑块1_容器”）；
jQuery（文档）.ready（函数（$）{
变量选项={
$FillMode:4，
};                            
var jssor_slider1=新的$JssorSlider$（'slider1_container'，选项）；
//响应代码开始
//如果不需要滑块缩放，可以删除响应代码
//当窗口调整大小时
函数ScaleSlider（）{
var parentWidth=$（'#slider1_container'）.parent（）.width（）；
如果（父宽度）{
jssor_滑块1.$ScaleWidth（父宽度）；
}
其他的
设置超时（ScaleSlider，30）；
}
//文档准备就绪后缩放滑块
ScaleSlider（）；
$（窗口）.bind（“加载”，ScaleSlider）；
$（窗口）。绑定（“调整大小”，缩放滑块）；
$（窗口）.bind（“方向更改”，缩放滑块）；
//响应代码端
});


向右滑动表示是，向左滑动表示否。
jssor_滑块1_启动器（“滑块1_容器”）；
jQuery（文档）.ready（函数（$）{
变量选项={
$FillMode:4，
};                            
var jssor_slider1=新的$JssorSlider$（'slider1_container'，选项）；
//响应代码开始
//如果不需要滑块缩放，可以删除响应代码
//当窗口调整大小时
函数ScaleSlider（）{
var parentWidth=$（'#slider1_container'）.parent（）.width（）；
如果（父宽度）{
jssor_滑块1.$ScaleWidth（父宽度）；
}
其他的
设置超时（ScaleSlider，30）；
}
//文档准备就绪后缩放滑块
ScaleSlider（）；
$（窗口）.bind（“加载”，ScaleSlider）；
$（窗口）。绑定（“调整大小”，缩放滑块）；
$（窗口）.bind（“方向更改”，缩放滑块）；
//响应代码端
});
刚刚在我的CSS中添加了最大宽度和最大高度，如下所示：

<style>
#slider1_container img {
    max-width:100%;
    max-height:100%;
}
</style>


#滑块1\u容器img{
最大宽度：100%；
最大高度：100%；
}
FillMode有一个选项，即5。也就是说（大图像包含，小图像包含实际大小）。我还没试过，但应该能用

参考资料几年后也出现了同样的问题。 我真的不想随便使用css，我想它一定是$FillMode工作方式中的一个bug，或者它一定有一些不明显的容器/冲突。 绝对不“包含”的图像，尝试了所有$Fills模式

注意：使用2019.06.28的最新版本。

不幸的是，即使复制并粘贴了这个精确的代码，图像仍然太放大。我可以通过添加：“#slider1_container img{max width:100%；max height:100%；}”来获得它。我想最好的方法是将$FillMode设置为0、1或2 
<style>
#slider1_container img {
    max-width:100%;
    max-height:100%;
}
</style>