CSS/LESS：如何将div的高度设置为其父元素宽度的112%？
CSS/LESS：如何将div的高度设置为其父元素宽度的112%？
我有两个div，div.outer和div.inner：
...内容...
div.outer可以独立调整大小，包括宽度和高度。（不是由用户自己调整。）
在这个div内部有一个宽度是其父元素div.outer的90%的div.inner。这个div的宽高比必须是height / width = 1.24。也就是说，高度必须比宽度大1.24倍。
换句话说，如何设置一个div的高度等于其父元素宽度的112%？（1.2 * 90 ≈ 112）我希望能在Less或标准CSS中找到解决方案。（只有在必要时才使用javascript/jQuery）。
以下是伪CSS代码：
.outer{
width: resizable;
height: resizable;
}
.inner{
width: 90%;
height: 1.12 * width_of(.outer);
}
提前感谢。
问题的原因是要设置一个
元素的高度等于其父元素宽度的112%。这可以通过使用CSS或LESS来实现。
解决方法如下：
1. 首先，需要为HTML元素设置盒模型的大小。可以通过将以下代码添加到CSS或LESS文件中来实现：
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
2. 创建一个外部容器
，并设置其宽度为300像素，并添加一个绿色边框。
.outer {
width: 300px;
border: solid 1px green;
}
3. 在外部容器内创建一个内部容器
，并设置其宽度为父容器宽度的90%。同时，将其定位为相对定位。
.inner {
border: solid 1px red;
width: 90%;
position: relative;
}
4. 在内部容器的:before伪元素中添加content属性，并设置display为block，padding-top为124%。这将创建一个具有特定纵横比的占位符，以确保内部内容的高度与其宽度的112%相等。
.inner:before {
content: "";
display: block;
padding-top: 124%;
}
5. 最后，在内部容器内创建一个内容容器
。将其定位为绝对定位，并设置top、left、bottom和right属性为0，以填充整个内部容器。
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
6. 在HTML文件中，将上述代码嵌套在