在ie浏览器中,如何让背景图片随div大小变化

bm123 发布于 2016/09/26 10:33
阅读 1K+
收藏 0
我写了一个div,设置了一个背景图片,我怎么设置,能达到我改变div大小的时候,背景图片的大写也会随着div大小的变化而变化,谢谢
加载中
0
zabcd117
zabcd117

background-size属性可以做到,但是不兼容老版本的ie浏览器,老版本的ie可以用

DXImageTransform.Microsoft.AlphaImageLoader

zabcd117
zabcd117
回复 @bm123 : 是的
bm123
bm123
直接在css里面写这个属性吗?
0
554330833a
554330833a
重新set一遍不行吗
554330833a
554330833a
回复 @bm123 : 就是重新设置
bm123
bm123
set?这个是?
0
qycms_cn
qycms_cn

css:

  1. background-image:url(img_path);
  2. background-repeatno-repeat;
  3. background-positioncenter;
  4. background-sizecover;

0
eechen
eechen
支持CSS3的浏览器可以这样:
background-size: cover;
但IE8不支持CSS3.

可以考虑改为img,比如下面是在a这个块里放置img:
a设置为块,img设置width和height都为100%.
如果要保持图片宽高等比例缩放,可以把a里的height去掉.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>三列图片等宽布局</title>
<style>
* {
	margin: 0;
	padding: 0;
}
a {
	display: block;
	width: 30%;
	height: 110px;
	margin: 2.5% 0 0 2.5%;
	float: left;
	padding: 2px;
	border: 6px solid red;
	box-sizing: border-box;  /* 宽高包括边框和内边距(支持IE8) */
	overflow: hidden;
}
img {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
</style>
</head>
<body>
<div>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
<a href="javascript:void(0)"><img src="byd.jpg" /></a>
</div>
</body>
</html>



返回顶部
顶部