CSS 用子项填充容器 div，同时保留纵横比(与背景大小:包含一样)

Question

我正在设计一个HTML5纸牌游戏，它将作为移动应用程序运行，并且需要 #tablediv来缩放以填充但不溢出偏移父div，同时保持表格的正确纵横比为68%。这意味着它应该调整其大小以填充但不溢出父宽度和父高度，以便它在纵向和横向中工作。

一个例子是设置背景图像时背景大小：包含的工作原理。只是我不是在尝试设置背景图像，而是在尝试设置子div 的大小。这样，我可以对桌子上的所有后续元素使用百分比值，并使游戏在所有尺寸下看起来完全相同，纵横比完全相同。

谢谢！

更新 1

这是我的代码。查看桌子底部如何切掉宽屏幕尺寸和短屏幕尺寸：

http://vedanamedia.com/clients/intuitive-eye/speakeasy/

更新 2

我要做这样的东西（jsfiddle.net/webtiki/dAebS）或这个（dabblet.com/gist/2590942），除了它也尊重容器的收缩高度。

Answer 1

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

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

div {
    padding-bottom: 50%;
    height: 0;
}