响应式网页中，如何只用CSS实现div的高和宽保持固定比例

Dear 丶 2022-02-02 12:39 141阅读 0赞

# [响应式网页中，如何只用CSS实现div的高和宽保持固定比例][CSS_div] #

*引言：*

如果div里是<img>，原生就支持。

1.  .item img \{
2.      float: left;
3.      margin:5%;
4.      width: 20%;
5.  \}

>>>>>>>>>>>>>>>[demo1请点击][demo1]<<<<<<<<<<<<<<

*正文：*

1、使用**媒体查询**。

1.  @media only screen and (min-width: 100px) and (max-width: 640px) \{
2.     div\{
3.        width: 100px;
4.        height: 100px;
5.     \}
6.  \}
7.  @media only screen and (min-width: 641px) and (max-width: 789px) \{
8.     div\{
9.        width: 200px;
10.       height: 200px;
11.    \}
12. \}

2、利用**padding-bottom**是百分比值的话，参考的是父元素的width而不是height。

1.  .item \{
2.      float: left;
3.      background-color: darkslategrey;
4.      border: 1px solid black;
5.      margin: 5%;
6.      width: 20%;
7.      height: 0;
8.      padding-bottom: 20%;
9.  \}

>>>>>>>>>>>>>>>[demo2请点击][demo2]<<<<<<<<<<<<<<

3、使用vw属性，他是参考整个viewport（视窗）的宽度【**vw、vh、vmin、vmax**是css3新属性，支持主流浏览器且IE10以上】

1.  .item \{
2.      float: left;
3.      background-color: darkslategrey;
4.      border: 1px solid black;
5.      margin: 5%;
6.      width: 20vw;
7.      height: 20vw;
8.  \}

[CSS_div]: https://www.cnblogs.com/xjnotxj/p/5517651.html
[demo1]: http://jsfiddle.net/q3011893/rg2uqjet/embedded/result,html,css/dark/
[demo2]: http://jsfiddle.net/q3011893/6bq6fL9r/embedded/result,html,css/dark/