怎样在html中控制图片显示大小

怎样在html中控制图片显示大小,第1张

可以用“width”和“height”属性控制图片的显示大小。

1、新建html文件,在body标签中添加img标签,为img标签设置“src”属性,属性值为图片的地址,这时图片的显示大小是图片自身的大小:

2、为img标签单独设置“width”或“height”属性,属性值为宽度或者高度,这时图片的宽度将变成设置的宽度,高度将会按原比例进行缩放

3、同时为img标签设置“width”和“height”属性,这时图片的大小将会完全按照设置的大小显示:

可以用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指的是缩放比例:

html5默认允许用户缩放页面,如果需要禁止缩放,我们需要将user-scalabel=0设置下,具体代码如下:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

注意:meta在head里。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7046414.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存