Html 放大方形div以适应父div，同时保持纵横比

所以这让我抓狂，我想知道是否有一种方法可以用纯CSS实现这一点。我想做的是有一个固定高度的父div（紫色）。在紫色div中，我希望橙色div保持纵横比并向上缩放到父div的高度。如果我更改父div的大小，则橙色div应根据其纵横比进行相应缩放

注意：尝试在没有图像或百分比的情况下执行此操作

见示例：

---

您可以用一些简单的JS来完成。只需获取子对象（或父对象）的高度并设置宽度。您可以根据需要使用计算来获得所需的比率

var width=document.getElementById（'child'）。offsetHeight；
document.getElementById（'child'）.style.width=width+'px'
#父级{
宽度：100%；
高度：100px；
背景颜色：紫色；
}
#孩子{
身高：100%；
背景颜色：黄色；
}
您可以用一些简单的JS来完成。只需获取子对象（或父对象）的高度并设置宽度。您可以根据需要使用计算来获得所需的比率


var width=document.getElementById（'child'）。offsetHeight；
document.getElementById（'child'）.style.width=width+'px'
#父级{
宽度：100%；
高度：100px；
背景颜色：紫色；
}
#孩子{
身高：100%；
背景颜色：黄色；
}

No的可能复制我正在尝试在没有图像和固定父级px高度的情况下执行此操作。图像是技巧的一部分-您可以将其设置为透明（不可见）1x1 PNG，并且仍然可以完成任务。这种方法允许父对象是任意高度，而不是固定的像素数量。我正在寻找一种解决方案，它根本不涉及使用图像（出于语义目的）。希望有另一个技巧或方法可以做到这一点。可能重复的否我正在尝试这样做没有一个图像和固定的px高度的家长。图像是技巧的一部分-你可以使它成为一个透明（不可见）1x1 PNG，但仍然完成任务。这种方法允许父对象是任意高度，而不是固定的像素数量。我正在寻找一种解决方案，它根本不涉及使用图像（出于语义目的）。希望有另一个技巧或方法来做到这一点。谢谢你发送这个。你认为JS是唯一的方法吗？我正试图用纯css解决这个问题。玩flex box和其他一些边距黑客，看看我是否能让它工作。css中有一个
calc
函数，可以让你做一些事情，但你真正需要的是一个css变量。。。这是不支持跨浏览器的。我最后只是用sassThanks发送了这个。你认为JS是唯一的方法吗？我正试图用纯css解决这个问题。玩flex box和其他一些边距黑客，看看我是否能让它工作。css中有一个
calc
函数，可以让你做一些事情，但你真正需要的是一个css变量。。。这是不支持跨浏览器的。我最后只使用了sass