blocks|key|13089|text|几乎可以在所有浏览器上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13090|您可以尝试以百分比形式给出padding-bottom。|offset|length|style|CODE|13091|<div+style="height:0;width:20%25;padding-bottom:20%25;background-color:red">
<div>
Content+goes+here
</div>
</div>|code-block|syntax|javascript|13092|外部div是一个正方形，内部div包含内容。这个解决方案多次对我起作用。|13093|这是一个jsfiddle|13094|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/x6jj3dar/^0|0|D|E|0|0|0|4|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Works on almost all browsers.</p>

<p>You can try giving <code>padding-bottom</code> as a percentage.</p>

<pre><code>&lt;div style="height:0;width:20%;padding-bottom:20%;background-color:red"&gt;
&lt;div&gt;
Content goes here
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The outer div is making a square and inner div contains the content. This solution worked for me many times.</p>

<p>Here's a <a href="https://jsfiddle.net/x6jj3dar/">jsfiddle</a></p>


blocks|key|229569|text|这就是我想出来的。这是a+fiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|229570|首先，我需要三个包装器元素用于正方形和居中文本。|229571|<div><div><div>Lorem+ipsum+dolor+sit+amet,+consectetuer+adipiscing+elit,
sed+diam+nonummy+nibh+euismod+tincidunt+ut+laoreet+dolore+magna+aliquam+erat
volutpat.</div></div></div>|code-block|syntax|javascript|229572|这是样式表。它使用了两种技术，一种用于square+shapes，另一种用于centered+text。|229573|body+>+div+{
++++position:relative;
++++height:0;
++++width:50%25;+padding-bottom:50%25;
}

body+>+div+>+div+{
++++position:absolute;+top:0;
++++height:100%25;+width:100%25;
++++display:table;
++++border:1px+solid+#000;
++++margin:1em;
}

body+>+div+>+div+>+div{
++++display:table-cell;
++++vertical-align:middle;+text-align:center;
++++padding:1em;
}|229574|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Czkdt/|1|http://jsfiddle.net/UWERB/12/|2|http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html#^0|B|8|0|0|0|0|J|D|1|12|D|2|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|M|3|N|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]]]

<p>This is what I came up with. Here is <a href="http://jsfiddle.net/Czkdt/" rel="nofollow">a fiddle</a>.</p>

<p>First, I need three wrapper elements for both a square shape and centered text.</p>

<pre><code>&lt;div&gt;&lt;div&gt;&lt;div&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>This is the stylecheet. It makes use of two techniques, one for <a href="http://jsfiddle.net/UWERB/12/" rel="nofollow">square shapes</a> and one for <a href="http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html#" rel="nofollow">centered text</a>.</p>

<pre><code>body &gt; div {
    position:relative;
    height:0;
    width:50%; padding-bottom:50%;
}

body &gt; div &gt; div {
    position:absolute; top:0;
    height:100%; width:100%;
    display:table;
    border:1px solid #000;
    margin:1em;
}

body &gt; div &gt; div &gt; div{
    display:table-cell;
    vertical-align:middle; text-align:center;
    padding:1em;
}
</code></pre>


blocks|key|229605|text|另一种方法是将透明的1x1.png与width:+100%25、height:+auto和div中的绝对定位内容一起使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|229606|html：|229607|<div>
++++<img+src="1x1px.png">
++++<h1>FOO</h1>
</div>|code-block|syntax|javascript|229608|css：|229609|div+{
++++position:+relative;
++++width:+50%25;
}

img+{
++++width:+100%25;
++++height:+auto;
}

h1+{
++++position:+absolute;
++++top:+10px;
++++left:+10px;
}|229610|空闲：http://jsfiddle.net/t529bjwc/|229611|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/t529bjwc/^0|I|B|U|C|17|3|0|0|0|0|0|3|T|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|S|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>Another way is to use a transparent 1x1.png with <code>width: 100%</code>, <code>height: auto</code> in a <code>div</code> and absolutely positioned content within it:</p>

<p>html:</p>

<pre><code>&lt;div&gt;
    &lt;img src="1x1px.png"&gt;
    &lt;h1&gt;FOO&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>div {
    position: relative;
    width: 50%;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    position: absolute;
    top: 10px;
    left: 10px;
}
</code></pre>

<p>Fidle: <a href="http://jsfiddle.net/t529bjwc/" rel="noreferrer">http://jsfiddle.net/t529bjwc/</a></p>


blocks|key|229622|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|229623|<div+class='square-box'>
++++<div+class='square-content'>
++++++++<h3>test</h3>
++++</div>
</div>|code-block|syntax|javascript|229624|CSS|229625|.square-box{
++++position:+relative;
++++width:+50%25;
++++overflow:+hidden;
++++background:+#4679BD;
}
.square-box:before{
++++content:+"";
++++display:+block;
++++padding-top:+100%25;
}
.square-content{
++++position:++absolute;
++++top:+0;
++++left:+0;
++++bottom:+0;
++++right:+0;
++++color:+white;
++++text-align:+center;
}|229626|http://jsfiddle.net/38Tnx/1425/|offset|length|229627|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>HTML</p>

<pre><code>&lt;div class='square-box'&gt;
    &lt;div class='square-content'&gt;
        &lt;h3&gt;test&lt;/h3&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}
</code></pre>

<p><a href="http://jsfiddle.net/38Tnx/1425/">http://jsfiddle.net/38Tnx/1425/</a></p>


<p>I want my div to adapt its height to always equal its width. The width is percental. When the parent's width decreases, the box should decrease by keeping its aspect ratio.</p>

<p>How to do this is CSS?</p>


How to style a div to be a responsive square?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想让我的div调整它的高度，使其始终等于宽度。宽度是有意义的。当父对象的宽度减小时，长方体应该通过保持其纵横比来减小。CSS是怎么做的？

问如何将div样式化为响应式正方形？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将div样式化为响应式正方形？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将div样式化为响应式正方形？
EN