1

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

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

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

1 回答 1

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>

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

于 2013-04-16T09:50:28.783 回答