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>
问题解决