软件学堂

网游分类软件分类

CSS图片缩放

2012-11-24 来源:网络

【实例介绍】

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>

【代码分析】

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

图片缩放运行效果

图片缩放运行效果
如果只设置了图片的widm属性,而没有设置height属性,图片本身会自动给纵横比例缩放,如果只设定height属性也是一样的道理。只有当同时设定width和height属性时才会不等比例缩放。

 【素材及源码下载】

请点击:CSS图片缩放 下载本实例相关素材及源码

 

上一篇:图片设置不同的边框CSS样式
下一篇:CSS文字环绕图片

相关文章