关于如何利用CSS自动调整图片的大小

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}，这样就完成了。

1、通过css引入的图片，可以通过background-szie属性调整图片大小，background-size的语法如下，可以通过length,percentage,cover及contain四个之中的任一个来调整整改尺寸。

2、将length设置为500px auto；同时添加background-repeat属性，其值为no-repeat。注意：如果不加background-repeat：no-repeat属性，则图像会重复显示。

3、将percentage设置为50% auto。注意：高度设置为auto后，图片会根据具体宽度等比例调整高度，图片不会变形。

1、css控制图片大小，参考如下代码：

div img {

max-width:600px

width:600px

width:expression(document.body.clientWidth>600?"600px":"auto")

overflow:hidden

}

2、代码说明：

　◎ max-width:600px在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

　◎ width:600px在所有浏览器中图片的大小为600px

　◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。

　◎ overflow:hidden超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

---