需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先，打开html编辑器，新建一个html文件，例如：index.html。
2、其次，在index.html中的<style>标签中，输入css样式代码：body {background: url(image7.jpg) no-repeatbackground-size: 250px}。
3、最后，浏览器运行index.html页面，此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：body {background: url(image.jpg) no-repeatbackground-size: 300px}。
3、浏览器运行index.html页面，此时背景图片成功用css等比例缩小到了300px宽度的大小。
.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)，设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
