html图片按屏幕大小等比例缩放若浏览器允许可按Ctrl+鼠标滚轮滑动缩放，或用代码。
具体方法如下：
Ctrl+鼠标滚轮滑动缩放
css代码与htlm代码
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.jpg') no-repeat center center
}
#background-ie {
position: fixed
top: 0
left: 0
width: 100%
height: 100%
overflow: hidden
background-color: #211f1f
}
HTML代码如下：
<div id="background">
<div class="bg-photo bg-photo-1" style="display: block"></div>
</div>
参考资料
html 网页背景图片根据屏幕大小CSS自动缩放.CSDN博客[引用时间2017-12-29]
首先，你使用span元素并不是很合理，因为span元素是行元素，不能够设置宽高
如果一定要使用span元素，需要设置宽高，之后对图片进行处理
将span元素调整为块元素（设置display: block），赋予固定的宽度或百分比
之后为图片设置宽度和高度，宽设置为100%，即可让图片等比例进行缩放，宽度等于span的宽度，高度会等比例变化
.box {display: block
width: 200px
}
.box img {
width: 100%
}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>上面的参数看名知意，按需修改。
