Html CSS使用子元素填充容器div，同时保留纵横比（与背景大小一样：contain）

我正在设计一款HTML5纸牌游戏，它将作为一款移动应用程序运行，需要表div进行缩放以填充但不会溢出offsetParent div，同时保持表的正确纵横比为68%。这意味着它应该调整大小以填充但不溢出父宽度和父高度，以便在纵向和横向两种情况下工作

例如，设置背景图像时，background size:contain是如何工作的。只是我没有试图设置背景图像，我只是试图设置一个子div的大小。这样，我可以为表上所有后续元素使用百分比值，让游戏看起来完全相同，在所有大小上都具有完全相同的纵横比

谢谢

更新1

这是我的密码。请参见表格底部的宽屏幕和短屏幕尺寸截取方式：

更新2

---

我想要的东西就像这个jsfiddle.net/webtiki/dAebS或这个dabblet.com/gist/2590942，除了它也考虑容器的收缩高度。

你可以尝试删除默认高度，并添加填充底部，以创建正确的高宽比，并确保在重新调整大小时保持不变

我不完全确定我理解你所说的68%是什么意思，因为你没有代码笔设置，但我在下面添加了一个示例，它的纵横比为2:1，看看这是否是一个可能的修复方法

div {

    padding-bottom: 50%;
    height: 0;

}

就像这个或这个，除了它也尊重容器的收缩高度。