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

时间:2021-08-13 09:09:24
在网上找了一些例子,没看到自己想要的效果(难道人品问题-。-)。求一段用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


用js 控制div背景图片大小的方法。坐等答案,急用js 控制div背景图片大小的方法。坐等答案,急用js 控制div背景图片大小的方法。坐等答案,急没人知道么

#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


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

#5


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

#6


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

#7


用js 控制div背景图片大小的方法。坐等答案,急用js 控制div背景图片大小的方法。坐等答案,急用js 控制div背景图片大小的方法。坐等答案,急没人知道么

#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背景图片大小的方法。坐等答案,急