需要准备的材料分别有：电脑、浏览器、html编辑器。
创新互联于2013年开始，先为高碑店等服务建站，高碑店等地企业，进行企业商务咨询服务。为高碑店企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的style标签中，输入css代码：body{background: url(image.jpg) no-repeat;background-size: 200px 200px; }。
3、浏览器运行index.html页面，此时背景图片成功被设定为200*200。
js版和css版自动按比例调整图片大小方法，分别如下：
titlejavascript图片大小处理函数/title
script language=Javascript
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width0 image.height0){
var rate = (proMaxWidth/image.width proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate = 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
/script
/head
body
img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this); /
img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this); /
/body
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
style type="text/css"
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width 600 ? "600px" : this.width)!important;}
/style
div class="content-width"
pimg src="/down/js/images/12567247980.jpg"//p
pimg src="/down/js/images/12567247981.jpg"//p
/div
解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
1、首先需要新建一个HTML页面。
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片img src="images/5.png" /，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%; height:auto}，这样就完成了。
方法一：通过 style="width:180px;height:100px"
img src="" style="width:180px;height:100px"/
方法二：通过调用样式
style type="text/css"
.srcImg{width:180px;height:100px;}
/style
img src="" class="srcImg"/
可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
扩展资料：
CSS背景图片自适应、全屏、填充、拉伸
方法一：js控制
div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1"
img src="pictures/background.jpg" height="100%" width="100%"/
/div
div id="formbackground" style="position:absolute; z-index:-1;"img src="10.jpg" height="100%" width="100%"//div
script type="text/javascript"
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
});
/script
方法二：全浏览器兼容
.bg{
background:url();
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}
