javascript - 高度等于动态宽度（CSS流体布局）(Height equal to dynamic width (CSS fluid layout) [duplicate])

Question

This question already has an answer here:

(这个问题已经在这里有了答案：)

• Maintain the aspect ratio of a div with CSS 22 answers

  (使用CSS 22答案 保持div的长宽比)

Is it possible to set same height as width (ratio 1:1)?

(是否可以将宽度设置为相同的高度（比率1：1）？)

Example

(例)

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

(的CSS)

div {
  width: 80%;
  height: same-as-width
}

  ask by Thomas Norman translate from so

Answer 1

[Update: Although I discovered this trick independently, I've since learned that Thierry Koblentz beat me to it.

([更新：尽管我是独立发现这个技巧的，但自那以后我就知道Thierry Koblentz击败了我。)

You can find his 2009 article on A List Apart.

(您可以在A List Apart上找到他2009年的文章 。)

Credit where credit is due.]

(贷方应付款。])

I know this is an old question, but I encountered a similar problem that I did solve only with CSS.

(我知道这是一个老问题，但我遇到了我也只能用CSS解决类似的问题。)

Here is my blog post that discusses the solution.

(这是我的博客文章 ，讨论了该解决方案。)

Included in the post is a live example .

(帖子中包含一个实时示例 。)

Code is reposted below.

(代码在下面重新发布。)

HTML:

(HTML：)

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

(CSS：)

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

 #container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver/* show me! */ } 

 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>