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]

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

上面的参数看名知意，按需修改。

一般缩小是说的宽度，毕竟用户的浏览器和分辨率大小不一样。

最外层一个div然后再套一个div，然后里面放正文。

外层div的css设置width并用%表示，然后设置text-align居中（兼容ie），内层div的css设置margin为"0 auto"（一体的，无引号）并设置文字对齐text-align为left。

其实说了这么多还不如放代码，可是手机打，估计打出来格式也不太好看。你可以网上搜一下，一堆一堆的css方案。

如果你是说整体的，又包括里面的文字，那你好好设计一下%吧，估计很容易碎而且不常用。我没试过。

---