html - CSS 在保持宽高比的同时用子元素填充容器 div(与背景大小 : contain) 一样

Question

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

一个例子是 background-size: contain 在设置背景图像时如何工作。只是我不是要设置背景图片，而是要设置子 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;

}