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

最新推荐文章于 2023-11-28 13:27:11 发布

xixiruyiruyi

最新推荐文章于 2023-11-28 13:27:11 发布

阅读量3.2k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xixiruyiruyi/article/details/73457971

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

问题解决