用js 控制div背景图片大小的方法。坐等答案，急

在网上找了一些例子，没看到自己想要的效果（难道人品问题-。-）。求一段用js改变div的背景图片的大小。
图片的宽高小于div的宽高，想让背景图片自动适应div的宽高。
图片宽高：200 200;div宽高：400 400;
比如：



<html>

<head>

<style>

#div{

    background:url(1.jpg) no-repeat;

}

</style>

</head>

<body>

<div id="div">


</div>

</body>

</html>

怎么解决呢？

17 个解决方案

#1

是这个意思吗？div加宽加高的话，背景图片就相当于拉伸那个效果？是不是？那背景就模糊了啊

#2

模糊无所谓啦，只要能拉伸开，平铺整个div就可以，呵呵~

#3

坐等答案。难道没人知道么？

#4

这个貌似很难实现，思路是把图片垫到div下边，然后div设置背景透明。div宽高发生变化的时候，动态调整底下的那个图片的宽高。不过这样效率上不是很高了。。。你可以把那个背景图片设置为居中不行吗？为何要充满呢？或者你可以把那个图片做的很大，这样也行

#5

需要类似一个桌面的div层，我写了一个上传图片设置为这个div的背景图片，不能把图片居中吧，那样太难看了。

#6

有没有例子或者代码能提供参考一下的啊，在下不胜感激。用js 控制div背景图片大小的方法。坐等答案，急

#7

没人知道么

#8

写一个你想要的大小的DIV，然后把该DIV背景设为你想要的那张图片。

#9

呵呵，

#10

这个直接用JS改变IDV的长宽，或者直接改变IMG标签的长宽

#11

用js该div得长宽？这能影响到背景图片么？小弟不解-。-

#12

引用 8 楼 email21 的回复:

写一个你想要的大小的DIV，然后把该DIV背景设为你想要的那张图片。

这位仁兄的方法。厉害，厉害。突然觉得自己有时候死脑筋了。呵呵
有没有现成的脚本？让我观摩一下，自己找了半天没找到（人品-。-）。。。

#13

给div加一个css样式



        div

        {

            background-image: url("1.gif");

            width: 400px;

            height: 400px;

            border: solid 1px silver;

            background-repeat: no-repeat;

            filter: progid:dximagetransform.microsoft.alphaimageloader(src='1.gif', sizingmethod='scale');/*加上这个样式，就能满足你的要求*/

        }

PS:仅支持IE

下面是一个jQuery版完整的html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function() {

            $(document).click(function() {

                $("div").width(parseInt($("div").width()) + 20 + "px").height(parseInt($("div").height()) + 20 + "px");

            });

        });

    </script>


    <style type="text/css">

        div

        {

            background-image: url("1.gif");

            width: 400px;

            height: 400px;

            border: solid 1px silver;

            background-repeat: no-repeat;

            filter: progid:dximagetransform.microsoft.alphaimageloader(src='1.gif', sizingmethod='scale');

        }

    </style>

</head>

<div>

</div>

</body>

</html>

#14

他说的是背景不是img

引用 10 楼 lifetimeus 的回复:

这个直接用JS改变IDV的长宽，或者直接改变IMG标签的长宽

#15

背景图缩放有些不现实啊，只能平铺的。。。
或者你可以做成假的，象#3楼说的那样，给图片和div样式position:absolute;让它们重叠，然后调整图片的大小跟层一样就行了

#16



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <style type="text/css">

        #d1,#img1{position:absolute;left:0px;top:0px;}

    </style>

</head>

<body>

    <div style="position:relative;">

        <img id="img1" src="http://info-database.csdn.net/Upload/2011-10-17/475-609528.jpg" />

        <div id="d1">

            在这里输出内容，<br />

            改变这个层的大小

        </div>

    </div>

    <script type="text/javascript">

        $(function () {

            $("#img1").css({

                width: $("#d1").width() + "px",

                height: $("#d1").height() + "px"

            });

        })

    </script>

</body>

</html>

#17

引用 13 楼 hack_pan 的回复:

给div加一个css样式
CSS code

        div
        {
            background-image: url("1.gif");
            width: 400px;
            height: 400px;
            border: solid 1px silver;
            backg……

添加样式属性成功。谢谢啦~JQuery的办法还在试验中。各位要是有遇到类似的问题可以用样式写哦。
感谢hack_pan 用js 控制div背景图片大小的方法。坐等答案，急

#1

是这个意思吗？div加宽加高的话，背景图片就相当于拉伸那个效果？是不是？那背景就模糊了啊

#2

模糊无所谓啦，只要能拉伸开，平铺整个div就可以，呵呵~

#3

坐等答案。难道没人知道么？

#4

#5

需要类似一个桌面的div层，我写了一个上传图片设置为这个div的背景图片，不能把图片居中吧，那样太难看了。

#6

有没有例子或者代码能提供参考一下的啊，在下不胜感激。用js 控制div背景图片大小的方法。坐等答案，急

#7

没人知道么

#8

写一个你想要的大小的DIV，然后把该DIV背景设为你想要的那张图片。

#9

呵呵，

#10

这个直接用JS改变IDV的长宽，或者直接改变IMG标签的长宽

#11

用js该div得长宽？这能影响到背景图片么？小弟不解-。-

#12

引用 8 楼 email21 的回复:

写一个你想要的大小的DIV，然后把该DIV背景设为你想要的那张图片。

这位仁兄的方法。厉害，厉害。突然觉得自己有时候死脑筋了。呵呵
有没有现成的脚本？让我观摩一下，自己找了半天没找到（人品-。-）。。。

#13

给div加一个css样式



        div

        {

            background-image: url("1.gif");

            width: 400px;

            height: 400px;

            border: solid 1px silver;

            background-repeat: no-repeat;

            filter: progid:dximagetransform.microsoft.alphaimageloader(src='1.gif', sizingmethod='scale');/*加上这个样式，就能满足你的要求*/

        }

PS:仅支持IE

下面是一个jQuery版完整的html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function() {

            $(document).click(function() {

                $("div").width(parseInt($("div").width()) + 20 + "px").height(parseInt($("div").height()) + 20 + "px");

            });

        });

    </script>


    <style type="text/css">

        div

        {

            background-image: url("1.gif");

            width: 400px;

            height: 400px;

            border: solid 1px silver;

            background-repeat: no-repeat;

            filter: progid:dximagetransform.microsoft.alphaimageloader(src='1.gif', sizingmethod='scale');

        }

    </style>

</head>

<div>

</div>

</body>

</html>

#14

他说的是背景不是img

引用 10 楼 lifetimeus 的回复:

这个直接用JS改变IDV的长宽，或者直接改变IMG标签的长宽

#15

#16



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <style type="text/css">

        #d1,#img1{position:absolute;left:0px;top:0px;}

    </style>

</head>

<body>

    <div style="position:relative;">

        <img id="img1" src="http://info-database.csdn.net/Upload/2011-10-17/475-609528.jpg" />

        <div id="d1">

            在这里输出内容，<br />

            改变这个层的大小

        </div>

    </div>

    <script type="text/javascript">

        $(function () {

            $("#img1").css({

                width: $("#d1").width() + "px",

                height: $("#d1").height() + "px"

            });

        })

    </script>

</body>

</html>

#17

引用 13 楼 hack_pan 的回复:

给div加一个css样式
CSS code

        div
        {
            background-image: url("1.gif");
            width: 400px;
            height: 400px;
            border: solid 1px silver;
            backg……

秒客网

用js 控制div背景图片大小的方法。坐等答案，急

17 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

相关文章