<style>
.btn{position: relativeoverflow: hiddenmargin-right: 4pxdisplay:inline-block*display:inlinepadding:4px 10px 4pxfont-size:14pxline-height:18px*line-height:20pxcolor:#ffftext-align:centervertical-align:middlecursor:pointerbackground-color:#5bb75bborder:1px solid #ccccccborder-color:#e6e6e6 #e6e6e6 #bfbfbfborder-bottom-color:#b3b3b3-webkit-border-radius:4px-moz-border-radius:4pxborder-radius:4px}
.btn input {position: absolutetop: 0 right: 0margin: 0border: solid transparentopacity: 0filter:alpha(opacity=0) cursor: pointer}
</style>
<div id="up_btn" class="btn">
<span>添加图片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
1、首先用dw编辑器建立了一个静态页面
2、将建好的静态页命名为css.html，标题为了“css如何设置图片大小自适应”
3、在body中添加两个div，设置不能的宽度，并设class 为div1和div2，目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式
5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了
6、这个时候我们需要在img 类中加入限制图片的宽度的css语句让他自己适应容器的宽度.img img{ width:100%height:auto}
1、新建一个html文件，命名为test.html，用于讲解。
2、在test.html文件内，创建一个div模块，并设置其class属性为mydiv。
3、在div模块内，使用img图片标签创建两张图片，src属性指向不同的图片路径。
4、在css标签内，使用“*”初始化页面所有元素的css样式，设置内边距为0，外边距为0。
5、在css标签内，设置div的样式，设置其宽度为700px，高度为400px，边框为1px，居中对齐。
6、在css标签内，设置图片的的大小，宽度为280px，高度为200px，为了使用图片水平排列，需要使用float属性设置图片浮动的统一方向，例如，这里设置统一浮动向左。
7、在浏览器打开test.html文件，查看图片水平排列的效果。
