css 图片自动缩放问题 10
.tu6{background-image:url(../images/022.png);width:215px;height:25px;margin-bottom:5p...
.tu6{
background-image:url(../images/022.png);
width : 215px;
height:25px;
margin-bottom : 5px;
background-repeat : no-repeat;
}
上面的定义只不过定义了图片的活动范围，并不能缩放图片，我要的是如果图片比width : 215px;height:25px;大，那么缩放到这么大，如果比这小，那么图片放大到width : 215px;height:25px;，这个该怎么写呢
这个背景图我用的是整张圆角图片，省的做圆角时用好几张图片结合了 展开
background-image:url(../images/022.png);
width : 215px;
height:25px;
margin-bottom : 5px;
background-repeat : no-repeat;
}
上面的定义只不过定义了图片的活动范围，并不能缩放图片，我要的是如果图片比width : 215px;height:25px;大，那么缩放到这么大，如果比这小，那么图片放大到width : 215px;height:25px;，这个该怎么写呢
这个背景图我用的是整张圆角图片，省的做圆角时用好几张图片结合了 展开
展开全部
“这个背景图我用的是整张圆角图片，省的做圆角时用好几张图片结合了”
LZ你这个想法很有创意，但是我跟你说实现不了或者要实现要走很多路。
第一：你如果把图片设成背景，那么背景图片是不能随便缩放的。你只能控制背景图片平铺，位置等属性。因为CSS里面是没有控制背景的大小的属性，你的 width : 215px;height:25px;控制的只是容器的大小。
如果用JS控制还请达人来写吧，我水平有限没想到合适思路。
第二：你如果非要实现图片作为背景，那么我可以给你一个思路。就是你把图片作为img元素放到下层，然后控制img元素的大小，css有max-height,max-width,min-height,min-width,属性，但可惜的是IE6不支持，IE6只能用js控制，用js控制img大小很容易。
举个例子：
css部分：
.tu6-con{position:relative;width : 215px;height:25px;}
.tu6{width:215px;height:25px;margin-bottom:5px;}
.tu6bg{position:absolute;width:215px;height:25px;z-index:-100}
.tu6bg img{max-height:25px;max-width:215px;min-height:25px;min-width:215px}//IE6就用js控制，js自己上网下，有很多。
html部分：
<div class="tu6-con">
<div class="tu6"></div>
<div class="tu6bg"><img src="images/022.png"></div></div>
第三：我很无语你能想到这种办法控制圆角，你都不担心放大缩小引起图片失真？？？？
一般控制圆角都是把圆角部分切出来，然后单独写。。。。
LZ再仔细研究下一般网站圆角都怎么布局的...
LZ你这个想法很有创意，但是我跟你说实现不了或者要实现要走很多路。
第一：你如果把图片设成背景，那么背景图片是不能随便缩放的。你只能控制背景图片平铺，位置等属性。因为CSS里面是没有控制背景的大小的属性，你的 width : 215px;height:25px;控制的只是容器的大小。
如果用JS控制还请达人来写吧，我水平有限没想到合适思路。
第二：你如果非要实现图片作为背景，那么我可以给你一个思路。就是你把图片作为img元素放到下层，然后控制img元素的大小，css有max-height,max-width,min-height,min-width,属性，但可惜的是IE6不支持，IE6只能用js控制，用js控制img大小很容易。
举个例子：
css部分：
.tu6-con{position:relative;width : 215px;height:25px;}
.tu6{width:215px;height:25px;margin-bottom:5px;}
.tu6bg{position:absolute;width:215px;height:25px;z-index:-100}
.tu6bg img{max-height:25px;max-width:215px;min-height:25px;min-width:215px}//IE6就用js控制，js自己上网下，有很多。
html部分：
<div class="tu6-con">
<div class="tu6"></div>
<div class="tu6bg"><img src="images/022.png"></div></div>
第三：我很无语你能想到这种办法控制圆角，你都不担心放大缩小引起图片失真？？？？
一般控制圆角都是把圆角部分切出来，然后单独写。。。。
LZ再仔细研究下一般网站圆角都怎么布局的...
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
大哥，你这个是设置背景图的，并不是表面层的图。如果你想设置缩放就不要用background.
而且你这么做有什么意义么？如果你要用背景为什么不设定好大小呢，背景拉伸也没必要吧。
如果你真想让背景也会根据你设定的大小缩放你的图的话，那你就只能写JS了。JS控制方法我就不会了。我刚才也研究了一下没弄出来。
你还是把background去掉吧。这样就能缩放了。
我刚才试验出来了一种方法，不过你得活用一下，用JS控制图片ID来改变大小，或者你可以不用JS直接改图的大小，但是要在图上加一个Layer浮动层。具体的参考我发的代码吧。代码写的并不是有多好，只是给你提供一个思路而已，加了Layer层以后别人就点不到你后面那个层的图片了。Layer层的图bgbg.gif是我做的一个1X1像素的透明图，你也做一个，然后就能实现Layer层透明了，JS的代码可以设定大小，你设定多大就是多大，不管你的图怎么添加都是设定好的大小。下面图片gaibian.jpg你随便找一个替换就可以了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>galaxyyang</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:599px;
height:397px;
z-index:1;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<script>
function yy()
{
var tt=document.getElementById("cc");
tt.width=100;
tt.height=60;
}
</script>
<style>
.aaa {
height: 200px;
width: 200px;
}
</style>
<body onload="yy()">
<div id="Layer1">
<img src="bgbg.gif" width="599" height="397" />
</div>
<div class="aaa"><img src="gaibian.jpg" name="cc" id="cc" /></div>
</body>
</html>
而且你这么做有什么意义么？如果你要用背景为什么不设定好大小呢，背景拉伸也没必要吧。
如果你真想让背景也会根据你设定的大小缩放你的图的话，那你就只能写JS了。JS控制方法我就不会了。我刚才也研究了一下没弄出来。
你还是把background去掉吧。这样就能缩放了。
我刚才试验出来了一种方法，不过你得活用一下，用JS控制图片ID来改变大小，或者你可以不用JS直接改图的大小，但是要在图上加一个Layer浮动层。具体的参考我发的代码吧。代码写的并不是有多好，只是给你提供一个思路而已，加了Layer层以后别人就点不到你后面那个层的图片了。Layer层的图bgbg.gif是我做的一个1X1像素的透明图，你也做一个，然后就能实现Layer层透明了，JS的代码可以设定大小，你设定多大就是多大，不管你的图怎么添加都是设定好的大小。下面图片gaibian.jpg你随便找一个替换就可以了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>galaxyyang</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:599px;
height:397px;
z-index:1;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<script>
function yy()
{
var tt=document.getElementById("cc");
tt.width=100;
tt.height=60;
}
</script>
<style>
.aaa {
height: 200px;
width: 200px;
}
</style>
<body onload="yy()">
<div id="Layer1">
<img src="bgbg.gif" width="599" height="397" />
</div>
<div class="aaa"><img src="gaibian.jpg" name="cc" id="cc" /></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<img src="XX.jpg" onload="javascript:if((this.width!=215)&&(this.height!=25)){(this.width=215)&&(this.height=25);}">
背景如楼上所说不能改变，不过普通的图片你可以试着用以上代码。
背景如楼上所说不能改变，不过普通的图片你可以试着用以上代码。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只能把图片大小编辑成所要的大小再设置背景
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
IE滤镜但是不支持FF
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.gif', sizingMethod='scale'
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.gif', sizingMethod='scale'
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
