가로 세로 비율을 유지하면서 콘테이너 div를 자식으로 채우는 CSS (배경 크기 : 포함)

Question

모바일 앱으로 실행되는 HTML5 카드 게임을 디자인 중이며 채우기 위해 #table div가 채워지지만 필요하지는 않습니다. 테이블의 올바른 종횡비를 68 %로 유지하면서 offsetParent div를 오버플로합니다. 즉, 채우기 크기를 조정해야합니다. 부모 너비와 부모 높이로 세로 및 가로 모두에서 작동합니다.

배경 이미지를 설정할 때 배경 크기 :이 포함 된 예가 있습니다. 배경 이미지를 설정하려고하지 않고 하위 div의 크기를 설정하려고합니다. 이 방법으로 테이블의 모든 후속 요소에 백분율 값을 사용할 수 있으며 모든 크기에서 정확하게 동일한 종횡비로 게임이 정확히 동일하게 보이게 할 수 있습니다.

감사합니다. 1

UPDATE 여기 내 코드입니다. 테이블이 넓고 짧은 화면 크기에 바닥에 떨어져 다진하는 방법을 알아보십시오 :

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; 

}