JQuery Resize图像插件错误答案

【问题标题】：JQuery Resize image plugin errorJQuery Resize图像插件错误
【发布时间】：2013-04-08 13:08:06
【问题描述】：

我正在尝试实现一个基于容器调整图像大小的简单插件。问题是，我不明白为什么当我将图像放在容器中时它没有调整我的图像大小

这是我要复制的简单插件演示页面

https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html

这是我的代码

<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
    $(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>


</head>
<body>

<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>

我的 CSS

.container {height: 440px;  width: 950px; background:#FFFFFF}

【问题讨论】：

您的演示有效。我错过了什么吗？
哦，好吧，我以为你是插件作者。你的 img 标签没有分配一个类，所以当你搜索 $(".imgLiquidFill") jquery 什么都不返回。
ajax.googleapis.com/ajax/libs/jquery/1.9./jquery.min.js未找到，正确包含jquery
你看我的评论了吗？
这样的。此外，您在 img 标记之后没有匹配的结束 div 标记。删除它。

标签： javascript jquery

【解决方案1】：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Image</title>

    <style>
        .container{
            background-color:#f7f7f7;
            border:2px solid #ccc;
            margin:10px;
            display:inline-block;
        }
        .imgLiquid {
            display:block;
            overflow: hidden;
            background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
        }
        .imgLiquid img{
            visibility:hidden;
        }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
        type="text/javascript"></script>
    <script type="text/javascript"
        src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".imgLiquidFill").imgLiquid({
                fill: true,
                fadeInTime:200,
                horizontalAlign: "center",
                verticalAlign: "top"
            });
        });
    </script>
</head>

<body>  
    <div class="container">
        <span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
            <a href="/media/Woody.jpg"  target="_blank" title="test">
                <img alt="" src="/media/Woody.jpg"/>
            </a>
        </span>
    </div>
</body>
</html>

您更改了代码并且忘记在类中定义imgLiquidFill 和imgLiquid，这对于使此插件有效非常重要。在修改代码时，请确保您没有忘记任何内容。另一件事是您可以重命名该类，但请确保您也在脚本中重命名它以使其相同。

【讨论】：

你让我回到这里。我真的很无聊在这里阅读这个问题。
试试这个新功能，envelopebudget.com/accounts/register。试试输入密码