Html 纵横比地狱与扭曲的数学难题（仅Css）

我有一个

4:3

的父母，还有一个缩小并居中的孩子。最后一个

4:3

孩子在里面

.table{
位置：相对位置；
宽度：400px；
高度：300px；
边框：1px实心；
}
.顶{
位置：绝对位置；
左：15%；
右：15%；
最高：20%；
底部：20%；
背景：黄色；
}
.项目{
位置：绝对位置；
宽度：10%；
身高：50%；
背景：粉红色；
}

4:3
4:3

您可以为

使用边距。顶部

：

.top {
    margin: auto xx auto xx; /* top right bottom left */
}

然后您可以设置项目的宽度和高度：

.item{
    height: 200px; /* example */
}

然后使用jQuery设置宽度：

var cw = $('.item').width();
$('.item').css({'height': 1.2 * cw +'px'});

---

您可以仅使用CSS和填充元素底部的技术来实现这一点。它依赖于这样一个事实，即填充百分比是根据容器（）的with计算的

在下面的示例中，我在

.top

元素上应用了纵横比（使用绝对定位和

边距：auto；

将其居中），通过这种方式，您可以使用

宽度：100%调整
项的大小；身高：100%作为
.top
已具有4:3的纵横比：


.table{
位置：相对位置；
边框：1px实心；
宽度：400px；
高度：300px；
}
.顶{
位置：绝对位置；
宽度：70%；
身高：0；
垫底：52.25%；
左：0；
右：0；
底部：0；
排名：0；
保证金：自动；
背景：黄色；
}
.项目{
背景：粉红色；
位置：绝对位置；
宽度：100%；
身高：100%；
}
4:3
4:3
@web tiki，参见示例，
.top
居中且距离相等。问题是
.item
，在我的示例中，它没有
4:3
纵横比。此外，您可以查看以下答案：