javascript - Jssor 图像放大太多-6ren

javascript - Jssor 图像放大太多

转载作者：行者123 更新时间：2023-11-28 01:21:45

26

4

我正在使用the Jssor library创建图像 slider 。我将 $FillMode 设置为 4，以便图像适合容器，但它不起作用。其中一张图像如下所示:

enter image description here

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

这是我的代码:

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

最佳答案

刚刚向我的 CSS 添加了最大宽度和最大高度，如下所示:

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

关于javascript - Jssor 图像放大太多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23190469/

26

4

0

文章推荐： c++ - 是否可以列出 QQmlContext 的上下文属性名称？

文章推荐： c++ - 使用动态规划打印矩阵中所有可能路径中总和最小的路径

文章推荐： PhP curl simple_dom_document 请求从 snowbird.com 获取雪数据

php - (太多)太多 View 导致问题
我有一个使用 PHP 和 MariaDB 10.3 的小型大型数据库应用程序。我有大约 100 个表，大约有 3,000 个 View 。当超过 1,000 个 View 时，数据库架构就会崩溃并
regex - 解析 "\(|.*?)|)"- 太多)
parsing "\(|.*?)|)" - Too many )'s. 写这个的时候我收到这个错误... private static Regex resourceTextsREGEX = new
json - 为什么我生成的JSON的 “\\”太多？
我有一个Powershell脚本，它会生成一个包含数据的JSON文件。我对此文件有问题。它产生两倍的“\”! 你知道我该怎么解决吗？这是我的生成JSON文件的代码: [ordered]@{ pcn
Python:太多 join()？
我不确定为什么会收到此错误，我在不同点使用 str.join() 和 os.path.join()在脚本中，这是原因吗？使用os.path.join: from os.path import get
ios - b2Body 太多？
一段时间后，在我的应用程序中，似乎出现了一个大问题。有一个来自 Box2D 的 b2Bodys 的构建。我确实在我的应用程序中使用了一些 b2Body 来进行碰撞，但我会说屏幕上一次最多有 10 个。
javascript - 太多 "or"语句 (javascript)
我正在创建一个包含 6 种不同问题类型的简单数学程序。我想让程序随机显示6种类型中的一种，但有些问题应该出现得比较频繁。我使用加权数组，但从加权数组中选择问题类型后，如果不在 if 语句中使用 10
objective-c - NSView 太多？
我想构建一个包含大约 400 个单元的 Controller ，4 列，每列 100 个单元。每个单元格都必须被绘制并响应鼠标事件。这个会不会太重了？我应该为每个单元使用另一种方法，如 CALayer
Haskell 太多 where 子句，任何替代建议
我是 Haskell 的新手，在编写小程序时，我通常会使用太多的 where 子句来检查函数中的许多内容，因此编写 where 子句是一种很好的做法，或者还有其他好的替代方法吗？例如，在下面的代码中
firebase - 尝试按照部署指令部署多个功能导致错误，arg 太多
我有一个 index.js，其中包含一些导出，每个导出仅包含一个函数。我尝试一次部署其中的几个，CLI 给我以下错误； Error: Too many arguments. Run firebase
javascript - 正则表达式有(太多？)很多情况
我在正则表达式上挣扎了几个小时，似乎没有找到最后一点解决方案。我基本上是逐行解析 C 头文件以查找变量。以下是我可能遇到的需要传递正则表达式的行的情况: //#define variable_nam
PHP 和(太多)输入字段
我有一个 html 表单，大约有 1500 个输入字段*(文本或隐藏)。form.action 是 POST 并且每个输入字段都有一个唯一的名称(没有 name=foo[])。每当我在提交表单后尝试
.net - GAC 文件夹 - 太多？
我很困惑一劳永逸 VS 添加引用(/net 选项卡)说 dll 的 gac 在这里: 我发现这个包含 GAC 的文件夹:(附注:为什么有 3 个 Gac 类型？) 还有这个包含 GAC 的文件夹:
Java:实现可比较但条件 if 太多。我怎样才能避免它们？
我有一个实现Comparable的对象列表。我想对此列表进行排序，这就是我使用Comparable的原因。每个对象都有一个字段 weight，它由另外 3 个成员 int 变量组成。对于具有最大
c# - WCF channel 太多
在我们的系统中，有多个“站点”通过 WCF 相互通信。每个站点通过 NetTCP 绑定(bind)公开约 20 个接口(interface)。当一个站点使用对等站点的接口(interface)时，它
c++ - 太多 libboost_*.lib
我已经从 http://boost.teeks99.com/ 下载了 boost 1.58.0(预编译，x86，VC 12.0)并安装到C:\local\boost_1_58_0(我也试过自己用msv
mysql - COUNT UNION 太多
所以...我有一个查询，该查询返回在我的网站上使用相同的电子邮件地址、密码和其他信息创建的用户帐户(是的，实现不好，不要问)。它通过从另一个程序获取用户 ID 来实现这一点。我的 SQL 是 SEL
javascript - AngularJS 太多 Controller ？
我知道这是一个有点菜鸟的问题，但我只是想问一下，如果我有太多 Controller ，这是好事还是坏事。假设我有一个网络应用程序，它有大约 12 个 View 。每个 View 都有自己的 Contr
ios - 导航 Controller 太多？
我认为我的项目做了一些可笑的错误。我正在制作一个项目，基本上是一组 View Controller ，其中一些 Controller 上有视频，其他 Controller 上有图像。我创建了一个模型，
PHP - 太多 mysql_query ("SELECT .. ") ..?
嘿，我正在创建一个电子商店并显示类别树和所有产品及其多种价格变化，我制作了 150 多个 mysql_query("SELECT ..."); 在一页上查询。 (如果我计算“while”循环)。是不
JavaScript:太多 if-else 语句？
我在 JS 方面遇到了问题。我正在尝试制作按类型排序的三个成分列表(用于酿造药水)，所有这些都是标签内的复选框。您应该选择(选中)三个列表中每一个的一个元素才能酿造一剂药水。如果您选择正确的成分并按

首页

博学

6Ren·AI

商城

javascript - Jssor 图像放大太多