如何在HTML中用CSS对图片进行缩放

html-css022

如何在HTML中用CSS对图片进行缩放,第1张

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例:

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

3、浏览器运行index.html页面,此时成功将矩形图片只显示了正方形部分。

4、点击小图后,成功显示了大图。

要实现鼠标放在block上以中心为原点进行放大,可以利用CSS3的transform和transition来实现

CSS3的transform: scale()可以按比例放大或缩小block的功能。