根据高度设置宽度
我的元素：
<body>
<div id="square"></div>
</body>
风格：
body, html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported, preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: darkorange; /* Makes it visible. */
}
脚本，使其保持方形：
window.onload = window.onresize = function (event) {
var mySquare = document.getElementById("square");
mySquare.style.width = mySquare.offsetHeight + 'px';
};
问题是要在纯CSS中做同样的事情。没有脚本。
问题答案：
我知道有两种技术可以根据元素的高度保持元素的长宽比：
当 高度相对于视口时 ：
您可以使用vh单位：
div {
width: 75vh;
height: 75vh;
background:darkorange;
}
<div></div>
对于 基于父元素的高度的高度 ：
您可以使用具有所需纵横比的虚拟图像。宽高比为1：1的示例可以使用1 * 1透明.png图像，也可以使用@vlgalik注释为1 * 1
base64编码的gif：
html,body{
height:100%;
margin:0;
padding:0;
}
#wrap{
height:75%;
}
#el{
display:inline-block;
height:100%;
background:darkorange;
}
#el img{
display:block;
height:100%;
width:auto;
}
<div id="wrap">
<div id="el">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
</div>
请注意，此最后一个演示不会在调整窗口大小时更新。 但是长宽比保持在页面负载上
UPDATE：
正如在注释设置中所报告的那样display:inline-flex:，#el似乎可以解决窗口大小调整方面的更新问题。
-
问题内容： 我有一组元素，要求它们的最小宽度等于它们的高度，但是高度没有明确设置。目前，我可以通过jQuery 设置css 属性来实现此目的： 是否可以直接在CSS中指定此行为？ 问题答案： 我不相信没有JS，这是不可能的，但是也许有人可以证明我错了？ CSS不允许您使用动态变量，因此，如果在页面加载之前未设置高度，我不确定该怎么做。
-
我使用Flexbox，但似乎有一个问题，当我尝试设置父div的高度/宽度为自动。 Flexbox指南， 我也试试这个， 但它只给一行子项上色， 根据子记录宽度设置父背景颜色存在问题，如何使用Flexbox设置自动宽度。 是否可以使用JavaScript找出宽度并设置父宽度？ 请您建议最佳做法，按照分区的最大高度来安排项目。
-
我应该添加哪些约束来设置宽度和高度与Superview成比例（在我的例子中是UIViewController的视图）在iOS自动布局中，通过自动调整大小，我们可以像下面显示的图片一样进行操作。
-
问题内容： 我需要将元素的 宽度 保持为 高度 的百分比。因此，随着高度的变化，宽度也会更新。 通过为padding-top使用％值可以实现相反的效果，但以padding-left为百分比将是对象宽度的百分比，而不是其高度。 因此，使用这样的标记： 我想使用这样的东西： 为了确保根据盒子 的高度保持 盒子的 长宽比 。高度是可变的，因为它的百分比裕度-当窗口的高度改变时，盒子的高度也会改变。 我知
-
我试图使每个项目的宽度的基础上的内容，但我到目前为止设置的宽度所有的方式可用的空间。我做错了什么？ 目标是根据内容大小设置宽度。 目前 https://jsfiddle.net/v6cgLjbd/8/
-
我想显示 3x3 大小的网格视图。我想根据设备大小设置高度和宽度。我从这个链接中获取参考。 主要活动- 活动_主要- 编辑- 就像首先得到屏幕高度和宽度，然后每个项目的高度和宽度是我得到的屏幕高度和宽度值的1/3。