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

html-css018

如何在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指的是缩放比例:

Q1.二者有何区别?\x0d\x0aA1.写在css里面的图片是以背景图形式存在的,而写在html里的是以标签形式存在的,\x0d\x0a 在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签的内容,再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,之后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。\x0d\x0a\x0d\x0aQ2.什么图片插入在css,什么图片插入在html里面?\x0d\x0aA2.如果是装饰性的图片就写在css里面,如果是内容性的图片就写在html里面,\x0d\x0a 打个比方,你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面,相框里面的内容照片就写在html里面。\x0d\x0aQ3.不知道怎样问了,扩展点说就更好。\x0d\x0aA3.以后的网页设计方向是表现层和内容层分离,css管表现,也就是显示效果,html管结构,内容结构的划分,这样代码要简洁易维护一些。关于其他回答中的“像这种属于表现层的东西都会被丢弃的”这种说法是不正确的,内容中的图片还是要使用图标而不是css背景来引入。而“css图片可以复用,图片不能复用”这种说法也不正确,网页加载过程中相同的图片会下载一次并保存在缓存里面,其他地方的使用了同样的图片是不会再去下载的。图片也可以复用。