상위 div의 높이 경계 내에 맞게 하위 div 크기 조정

원하는 문제는 높이와 너비가 설정되지 않은 경우 해당 컨테이너에 자동으로 크기를 지정하는 SVG 요소를 사용하는 것입니다. 부모 컨테이너의 높이를 절대 넘지 않도록 child div의 크기를 자동으로 조정하는 방법이 필요합니다. 나는 그것이 작동 할 것이라고 희망하면서 position:absolute; top:0; bottom:0;를 시험해 보았다. 그러나 그것은하지 않았다.상위 div의 높이 경계 내에 맞게 하위 div 크기 조정

html :

<div id='container'> 
    <div id="logo"> 
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400.168 177.975" enable-background="new 0 0 400.168 177.975" 
     xml:space="preserve"> 
      <path d="M150 0 L75 200 L225 200 Z" /> 
    </svg>

css : 여기 내 코드 샘플입니다

내 컨테이너 로고는 크기를 조정하지만 항상 페이지의 폭을 유지하는 이유입니다,뿐만 아니라 SVG를 가지고

#container { 
    width: 100%; 
    padding-bottom:40%; 
    background-color:red; 
    position:relative; 
} 
#logo { 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    position:absolute; 
}

(종횡비 유지를위한 제한 요인). 내 자식 div id='logo'의 경계 (높이 및 너비) div id='container'의 제지를 유지하는 방법이 있습니까?

Relevant fiddle.

편집 : 해결 방법은 행복할만한 비율 (상위 div의 비율)로 너비를 설정하고 높이를 auto로 설정하는 것입니다. 높이를 지정하지 않으면 계산되지 않습니다.

출처

2014-12-09 Jared

당신은 [이 사람]에 바이올린을 변경 싶어 수도 (http://jsfiddle.net/chipChocolate/0pgefayc/2/). –

감사합니다. 업데이트했습니다. – Jared

그냥 높이를 추가하십시오 : 100 %;

#container { 
    width: 100%; 
    padding-bottom:40%; 
    background-color:red; 
    position:relative; 
} 
#logo { 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    position:absolute; 
    height: 100%; 
}

바이올린 여기 사업부에 :http://jsfiddle.net/mLrjr1sg/

출처

2014-12-09 19:02:47

이것은 나에게 곤경을주고있다. 내 이해는 너비가 먼저 계산 된 다음 필요한 경우에만 높이를 계산한다는 것입니다. 높이 지정 만하면 전체 div를 채우는 너비가됩니다. 그런 다음 너비를 지정하면 div를 오버플로합니다. – Jared

높이 : 100 %; div를 채우지 않습니다. 여기를 참조하십시오 : http://jsfiddle.net/mLrjr1sg/1/ –

상위 div의 높이 경계 내에 맞게 하위 div 크기 조정

답변

관련 문제