如何通过CSS控制图片大小

html-css06

如何通过CSS控制图片大小,第1张

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超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

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

背景图片的大小css是没办法控制的,只能你要多大的背景图片就做多大的,水平垂直居中是这样写的:background:url(你的背景图片地址) no-repeat center center