可以用“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里。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)