blocks|key|3917844|text|对于纯CSS2.1，您可以通过设置padding-top:+100%25来使框保持1:1的比例(因为垂直填充是根据容器的宽度而不是高度计算的)。您问题的注释提供了一些带有示例的链接。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3917845|entityMap^0|H|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>With pure CSS2.1, you can make a box preserve a 1:1 ratio by setting <code>padding-top: 100%</code> (since vertical paddings are calculated from the container width, not height). The comments to your question provide some links with examples.</p>


blocks|key|137791|text|使用jQuery完成|type|unstyled|depth|inlineStyleRanges|entityRanges|data|137792|var+x+=+$('.element').width();
$('.element').css(
++++{'height':+x+%2B+'px'}
);|code-block|syntax|javascript|137793|JSFiddle上的演示|offset|length|137794|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/iamcem/SJtrd/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Done with jQuery</p>

<pre><code>var x = $('.element').width();
$('.element').css(
    {'height': x + 'px'}
);
</code></pre>

<p>Demo on <a href="http://jsfiddle.net/iamcem/SJtrd/" rel="nofollow">JSFiddle</a></p>


blocks|key|2573832|text|我相信你不能只用CSS3来做到这一点。CSS只是简单地设置样式。不过，您可以使用JQuery/JS来实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2573833|var+width+=+$('div.tile-square').width();
$('div.tile-square').height(width+%2B+'px');|code-block|syntax|javascript|2573834|或者，您可以这样做(不是首选)：|2573835|$('div.tile-square').css('height',+$('div.tile-square').css('width'));|2573836|JSFiddle：http://jsfiddle.net/7k8pp/3/|offset|length|2573837|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7k8pp/3/^0|0|0|0|0|9|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>I believe you cannot do this with just CSS3. CSS simply does styling. You can achieve this with JQuery/JS though:</p>

<pre><code>var width = $('div.tile-square').width();
$('div.tile-square').height(width + 'px');
</code></pre>

<p>Or you can do this (not as preferred):</p>

<pre><code>$('div.tile-square').css('height', $('div.tile-square').css('width'));
</code></pre>

<p>JSFiddle: <a href="http://jsfiddle.net/7k8pp/3/" rel="nofollow">http://jsfiddle.net/7k8pp/3/</a></p>


blocks|key|2573871|text|派对来晚了，但仍然很重要。前面已经提到，这可以使用纯CSS来实现，尽管没有一个全面的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2573872|为了保持任何元素的纵横比，我们可以使用padding-top+(它基于元素的宽度)。因此，例如，如果我们将元素的宽度设置为25%25，则将padding-top属性设置为25%25将强制该元素成为正方形。|offset|length|style|CODE|2573873|看看下面的例子：|2573874|​|2573875|.tile+{++
++background:+#369;+float:+left;
++width:+23%25;
++margin:+1%25;
++position:+relative;
}
.tile-square+{
++padding-top:+23%25;+/*+23%25+(.tile+width)+-+2%25+(top+and+bottom+margin)+*/
++height:+0;
}
.tile__content+{
++position:+absolute;
++top:+0;+left:+0;+bottom:+0;+right:+0;
++padding:+10px;
++color:+#fff;
}
body+{margin:+1%25;}|code-block|syntax|javascript|2573876|<div+class="tile+tile-square+tile-auto">
++<div+class="tile__content">Tile+1</div>
</div>
<div+class="tile+tile-square+tile-auto">
++<div+class="tile__content">Tile+2</div>
</div>
<div+class="tile+tile-square+tile-auto">
++<div+class="tile__content">Tile+3</div>
</div>
<div+class="tile+tile-square+tile-auto">
++<div+class="tile__content">Tile+4</div>
</div>|2573877|2573878|这种方法有一个问题...|2573879|因为我们已经使用padding来强制元素的高度与宽度相同，所以如果我们随后向.tile添加内容，添加的内容似乎将出现在底部，并且元素将不再是正方形。为了克服这个问题，我们将.tile元素设置为relative，然后在其中添加第二个元素(.tile__content)。然后我们绝对定位.tile__content，使其位于填充所占据的区域之上。|2573880|entityMap^0|0|J|B|1P|3|1V|B|2B|3|0|0|0|0|0|0|0|12|5|2E|5|2O|8|3A|E|3Y|E|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1B|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1E|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1F|8|@$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]|$D|1M|E|1N|F|G]|$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|Y|$]]

<p>Late to the party, but still relevant. It's been mentioned that this can be achieved using pure CSS although without a comprehensive example.</p>
<p>To preserve the aspect ratio of any element, we can use <code>padding-top</code> (which is based on the width of the element). So if we set the width of an element to be <code>25%</code> for example, setting the <code>padding-top</code> property to <code>25%</code> will force the element to become a square.</p>
<p>Have a look at the example below:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.tile {  
  background: #369; float: left;
  width: 23%;
  margin: 1%;
  position: relative;
}
.tile-square {
  padding-top: 23%; /* 23% (.tile width) - 2% (top and bottom margin) */
  height: 0;
}
.tile__content {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 10px;
  color: #fff;
}
body {margin: 1%;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tile tile-square tile-auto"&gt;
  &lt;div class="tile__content"&gt;Tile 1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="tile tile-square tile-auto"&gt;
  &lt;div class="tile__content"&gt;Tile 2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="tile tile-square tile-auto"&gt;
  &lt;div class="tile__content"&gt;Tile 3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="tile tile-square tile-auto"&gt;
  &lt;div class="tile__content"&gt;Tile 4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<h1>There is an issue with this method...</h1>
<p>Because we have used padding to force the height of the element to be the same as the width, if we then add content to <code>.tile</code>, the content added will seemingly appear at the bottom and the element will no longer be a square.
To overcome this, we set the <code>.tile</code> element to be positioned <code>relative</code> and then add a second element (<code>.tile__content</code>) inside. We then position <code>.tile__content</code> absolutely so it sits over the area the padding occupies.</p>


blocks|key|3917780|text|我不知道纯css方法，但在jquery中可以使用$(+document+).width();。它将返回width，您可以将其设置为height。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3917781|$(+document+).width();将以px格式返回值。|3917782|entityMap^0|O|M|0|0|M|O|2|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

<p>I don't know the pure css method, but in jquery you can use <code>$( document ).width();</code>. It will return width and you can set it as height.</p>

<p><code>$( document ).width();</code> will return value in <code>px</code>.</p>


<p>I am using HTML5 and CSS3 to make a layout.</p>

<p>I need tiles on the page, which is a square div element. the tile is inside a bootstrap column, I need the width to be automatically match the column width, but I found it difficult to let the height = width, because width is a percentage value: 100%.</p>

<p>HTML:</p>

<pre><code>...
&lt;div class="col-md-2"&gt;
    &lt;div class="tile tile-square tile-auto"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
...
</code></pre>

<p>CSS:</p>

<pre><code>.tile-square{
    width: 100%;
    height: how to do this?
}
</code></pre>

<p>I am OK with jQuery/js solution, but I prefer using CSS3 to solve this alone. there is a "calc()" statement in CSS3, but I do not know if it can achive this functionality.</p>


HTML5/CSS3 make a square div, width is 100%, need height equals width

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我正在使用HTML5和CSS3来制作布局。我需要在页面上的瓷砖，这是一个正方形的div元素。磁贴在引导列中，我需要宽度自动匹配列的宽度，但我发现很难让高度=宽度，因为宽度是一个百分比值: 100%。HTML：...<div class="col-md-2">    <div class="tile tile-square tile-auto">        ...    </div></div>

问HTML5/CSS3制作正方形div，宽度为100%，需要高度等于宽度
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5/CSS3制作正方形div，宽度为100%，需要高度等于宽度EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5/CSS3制作正方形div，宽度为100%，需要高度等于宽度
EN