javascript Div Square，宽度大小基于 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20707519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div Square, width size based on 100% height
提问by Sebastien-Gath
I'm trying to make a responsive square with the width size based on the (100%) height of the element. I believe it's impossible using only CSS.
我正在尝试根据元素的 (100%) 高度制作一个宽度大小的响应式正方形。我相信仅使用 CSS 是不可能的。
The square width should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.
正方形的宽度应等于高度（大容器的100%。大容器大于屏幕的100%）。比率必须是宽度=高度以保持正方形。
采纳答案by Sebastien-Gath
Ok here the solution.
好的，这里的解决方案。
<div id="square" style="background-color:black;height:100%">test</div>
$(window).ready(updateWidth);
$(window).resize(updateWidth);
function updateWidth()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
回答by Escher
For a CSS-only solution (where you're sizing relative to the screen size), use viewport units. For example:
对于纯 CSS 解决方案（相对于屏幕大小调整大小），请使用viewport units。例如：
@media screen and (orientation:landscape) {
.box{
height: 100vh;
width: 100vh;
}
}
@media screen and (orientation:portrait) {
.box{
height: 100vw;
width: 100vw;
}
}
(You may want to reduce it to 98 units to eliminate scrolling)
（您可能希望将其减少到 98 个单位以消除滚动）
Works great for divs that need to take up a precise proportion of screen space.
非常适合需要占据精确比例的屏幕空间的 div。
回答by spaceman
You could do this with a tiny inline image. No JS, no extra files.
你可以用一个很小的内嵌图像来做到这一点。没有JS，没有额外的文件。
.container {
height: 150px;
width: 100%;
text-align: center;
background: #acd;
}
.square {
display: inline-block;
height: 100%;
background: #691;
}<div class="container">
<div class="square">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
</div>
</div>回答by Stefano Ortisi
I think this can be a good 'css only' solution for you. Cross browser working.
我认为这对您来说可能是一个很好的“仅使用 css”的解决方案。跨浏览器工作。
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Good to highlight this nice css rule:
很高兴强调这个漂亮的 css 规则：
If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element.
如果垂直填充（和边距）以百分比 (%) 值指定，则大小是包含元素宽度的百分比。
回答by Ringo
Put it on your <script src="http://code.jquery.com/jquery-1.10.2.js"></script>and try with jquery:
把它放在你的<script src="http://code.jquery.com/jquery-1.10.2.js"></script>身上并尝试使用 jquery：
var totalHeight = 0;
$("#yourContainer").children().each(function(){
totalHeight += $(this).height;
});
$("#yourContainer").css('width', totalHeight + 'px');
回答by Afzaal Ahmad Zeeshan
Since a square has same width and the height, and you know the width of the square, you can apply the same value to height.
由于正方形具有相同的宽度和高度，并且您知道正方形的宽度，因此您可以将相同的值应用于高度。
If you can use JS, then please try this: (jQuery)
如果你可以使用 JS，那么请试试这个：（jQuery）
var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/
回答by AzadMemon
You can accomplish this using javascript. I'm assuming that you have a larger div container, in which you want a square, whose height is the same height as the container. The html is as follows:
您可以使用 javascript 来完成此操作。我假设你有一个更大的 div 容器，你想要一个正方形，它的高度与容器的高度相同。html如下：
<div id="container">
<div id="square" style="height:100%;">
</div>
</div>
In javascript, you would simply do:
在 javascript 中，您只需执行以下操作：
<script>
var container = document.getElementById("container");
var square = document.getElementById("square");
square.style.width = container.style.height;
window.onresize=function(){
square.style.width = container.style.height;
};
<script>
Hope that helps
希望有帮助
