html缩小两倍

html-css014

html缩小两倍,第1张

html缩小两倍意思是将一个单位的CSS的pixels变成了4倍的设备的pixels那么大，即宽度乘以2、高度乘以面积扩大了2乘以2。现代浏览器上的缩放，是基于伸展pixels。结果是，html元素上的宽度并没缩放200%而由128pix变成256px，真实的pixels的被计算成了双倍，html元素在形式上依然是128CSS的pixels，即便占用了256设备的pixels。

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]