div显示图片不全和background-size在ie和火狐下不生效的解决方法

来源：互联网发布：cf刷枪软件编辑：程序博客网时间：2024/05/16 04:52

1：在固定长宽的div下，放入图片，有时候图片过大的时候，图片就不能完全显示在div里面。

如下面代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div.myDiv{            background-image: url(aa.bmp);            width: 90px;            height: 30px ;        }    </style></head><body><div class="myDiv"></div></body></html>

执行结果如下所示：

我们想让图片适应div时，一般会加上background-size:100% 100%;

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div.myDiv{            background-image: url(aa.bmp);            background-size:100% 100%;            width: 90px;            height: 30px ;        }    </style></head><body><div class="myDiv"></div></body></html>

执行结果如下所示：

2：图片确实是自适应div的大小了，但是在ie和火狐下，background-size:100% 100%;不生效

解决方法：加上filter属性

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div.myDiv{            background-image: url(aa.bmp);            background-size:100% 100%;            width: 90px;            height: 30px ;            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='aa.bmp',sizingMethod='scale');        }    </style></head><body><div class="myDiv"></div></body></html>

问题解决

阅读全文

0 0