可以用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指的是缩放比例:
1. html图片如何按屏幕大小等比例缩放html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放,或用代码。
具体方法如下:
1. Ctrl+鼠标滚轮滑动缩放
2. css代码与htlm代码
3. CSS 代码如下:
#background
{
position: fixed
top: 0
left: 0
width: 100%
height: 100%
overflow: hidden
background-color: #211f1f
display:none\8
}
#background .bg-photo
{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
display: none
overflow: hidden
-webkit-background-size: cover !important
-moz-background-size: cover !important
-o-background-size: cover !important
background-size: cover !important
}
#background .bg-photo-1
{
background: url('../image/alone.') no-repeat center center
}
#background-ie {
position: fixed
top: 0
left: 0
width: 100%
height: 100%
overflow: hidden
background-color: #211f1f
}
4. HTML代码如下:
<div id="background">
<div ></div>
</div>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)