您的位置：首页 > Web前端 > CSS

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

2017-06-19 11:17 381 查看

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>

问题解决

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航