关于css控制div的缩放问题

比如，建立4个div，要实现宽度随窗口变化而变化很简单，把宽度设成百分比形式就可以了。

css这样写：

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放，但是高度是不变的，这样肯定不行，我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢？直接写百分比么 height:21%; 这个就别想了，肯定不行的。
我们可以借用一个不常见的属性，padding-bottom属性。
从手册可以看到，当padding-bottom为百分比的值时，定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写：

我们就会得到一个和我们宽度相等的高度，而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是，手册上说我们用的padding-bottom的这个值

感觉像是个雷啊

今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。

<div style="width:100%;">
<div style="width:50%;float:left;">
<div "width:50%;float:left;"></div>
<div style="width:50%;float:right;"></div>
</div>
<div style="width:50%;float:right;">
<div style="width:50%;"><img src=">

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/alonejpg') 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]

---