CSS图片缩放

2012/11/24 13:08:58作者：佚名来源：网络

移动端

【实例介绍】

CSS图片缩放

CSS中图片的缩放是通过width和height两个属性来实现的。width和height属性可以设置为相对大小，也可以设置为绝对大小。width和height属性设置为相对大小时，当拖动缩放浏览器窗口改变其宽度时，图片的大小也会相应发生变化。例如，当设置width的值为50％时，图片的宽度将调整为父元素宽度的一半，代码如下所示。

【基本语法】

【语法介绍】

【实例代码】


<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片缩放</title>
<style>
<!--
img.Scale{
width:50%;            /* 相对宽度 */
}
-->
</style>
</head>
<body>
<img src="2.jpg" class="Scale">
</body>
</html>

【代码分析】

因为设置的是相对大小，所以当拖动浏览器窗口改变其宽度时，图片的大小也会相应发生变化，如图所示。这种伸缩图片的方法在实际制作网页时常常被使用，即先固定一边的长短，再单独调整另外一边。

图片缩放运行效果