html图片如何按屏幕大小等比例缩放

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]

1. 这个根据我帮同事们调页面的经验，还是给img标签加上高和宽比较好。这样的话，图片显示出来就会按照设定好的尺寸，不会出现意外情况。但如果没有设定，很有可能会出现图片上边有白条，或者没有按照想要的效果显示。我碰到的就是没有加宽高，造成了图片下沉，上面出现白条。

2. 一般，对于img正规的写法是第一种，标签都要讲究有开始，有闭合，或者就像第一种一样，使用单闭合标签。

如果就像第二种一样既不是单闭合标签，又没有闭合标签，就会出异常的。

对于html这块儿，该认真的还是要认真的，有些东西不能省的。

---