所以建议使用padding属性来控制：
例如：
{
width: 35%
height: 0
padding-bottom: 35%
margin: 0 auto
}
这样可以绘制一宽度为屏幕的35%的正方形样式框，网页中直接使用此样式框并编辑框内内容即可！
设置对应图片的width和htight的具体数值就可以了。举例一个：1
2
3
4
5
6
img{
width:auto
height:auto
max-width:100%
max-height:100%
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
1
2
3
4
<div style="width:50pxheight:40px">
<img src="a.jpg">
<!--这里我们假如图片的实际尺寸是320X320-->
</div>
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%就会发挥作用，
在max-height:100%的作用下，图片被缩放后在div的尺寸是：
width:40px
height:40px
这个尺寸符合max-height和max-width
.imgDiv{
width:500px
height:500px
background-image:url('../images/index.jpg')
-moz-background-size: 100% 100%
-o-background-size: 100% 100%
-webkit-background-size: 100% 100%
background-size: 100% 100%
-moz-border-image: url(./btn.png) 0
background-repeat:no-repeat\9
background-image:none\9
（此处空一行）
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')\9
}
扩展资料：css控制背景图片自动伸缩自适应的小技巧
例子如下：
.picLUp{
background:url(logo.png) no-repeat
width:100%height:40%
background-size:100% 100%
}
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled:
可选项，布尔值(Boolean)，设置或检索滤镜是否激活。true | false
true:
默认值，滤镜激活。
false:
滤镜被禁止。
sizingMethod:
可选项，字符串(String)，设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
