HTML 如何让图片自动改变大小,CSS如何设置图片的大小

原标题：CSS如何设置图片的大小

图片是的基本构成元素，通过img元素的属性值可以调整图片在浏览器中的显示效果，如图片的边框、大小以及为图片设置透明效果等各种样式。

通过img元素的属性值可以调整图片在浏览器中的显示效果会给文档添加大量无意义的代码，而使用CSS属性对页面上的图片进行统一管理，会事半功倍。

CSS控制图片大小的方式与HTML一致，也是通过width和height两个属性来控制。如果CSS和HTML同时设置了大小，那么以CSS定义的大小为准，而且通过CSS属性可以使用更多的方法对图片大小进行设置。图片的width和heigh大小可以使用相对和绝对单位，如果对图片大小值使用百分比，它是基于父对象的宽度，且不可以为负数。

例如，在下面实例中，为class名为cont内的图片宽度、高度使用两种方式定义：HTML代码内部、CSS属性定义。

cont{/*图片父元素样式*/

width:100px; /*父元素宽度为100像素*/

height:20Opx; /*父元索高度为200像素*/

background-color:#099; /*父元素设置背景颜色*/

}

img{/*图片样式*/

width:50%;/*图片宽度为父元素的50%*/

height:50%;/*图片高度为父元素的50%*/

}

页面演示效果如图5.6所示。

在上而实例中，XHTML代码设置宽度、高度时为绝对大小，而CSS属性设置为相对单位，宽度、高度皆为50%。图片的实际大小为:宽度为100像素、高度为100像素，故CSS属性设置级别高于XHTML代码中属性设置，且图片高度为父元素高度的50%，宽度也是如此。

如果没有class为cont元素包裹着图片，那么图片的大小是取决干浏览器窗口的宽度和高度，改变浏览器窗口大小时，图片的大小随浏览器窗口的改变而改变。根据XHTML嵌套规则，

标签下面只能为块元素，所以不能直接加入图片元素，代码如下：

Xhtml:

此处写法是错误的，却不妨碍用它来测试宽度和高度设置百分百的情况。即设置宽度为百分比，高度为绝对大小，那么宽度的大小将随浏览器窗口的大小变化而变化，而设置了固定大小的高度则不发生变化；反之高度为百分比、宽度为固定大小，亦是如此。

责任编辑：