需要准备的材料分别有：电脑、浏览器、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宽度的大小。
在css中改变background-image的大小可以通过将背景图片放置的一个div样式中，然后设置div的样式属性来实现。示例核心代码：
div{
background:url(图片路径)
background-size:800px 600px
background-repeat:no-repeat
}其中图片路径可以使用相对路径也可以使用绝对路径，不用添加双引号。最后一行的background-repeat:no-repeat意思可不允许背景图片在网页中平铺，只能使用一次。
扩展资料：
通过jquery中改变background-image的大小的实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
$('.box').CSS('backgroundSiz','300px 500px')
}
</script>
<style type="text/css">
.box{
background-image: url(1.png)
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
html代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>div中放置图片</title><link rel="stylesheet" href="liu.css"/></head><body><div class="center"><img src="./image/1.jpg"rel=""/></div></body></html>
css代码如下：
*{
margin: 0
padding: 0
}
/*方法一*/
.center{
width: 500px
height: 300px
background: pink
/*实现div里的图片水平垂直居中*/
display: table-cell
text-align: center
vertical-align: middle
}
.center>img{
/*1,图片过大1024*1024，让图片和布局高度宽度等比例缩放*/
width: 300px
height: 180px
}
