SVGのアスペクト比を維持して親のサイズを変更

Question

<div>（コンテナ内には<div>）のコンテナに3つの<svg>が並んでいます。

各<svg>は常にとはその幅に等しい高さを有し、その直接の親の幅の3分の1を取る必要があります。

これは、ウィンドウのサイズが変更され、<svg>の幅が小さくなるか大きくなるため、高さが必要なので、コンテナの高さも同じであることを意味します。<div>this答えの助言に

#container { 
 
    background-color: grey; 
 
} 
 

 
.svg-wrapper { 
 
    background-color: red; 
 
    display: inline; 
 
} 
 

 
svg { 
 
    background-color: white; 
 
    width: 33%; 
 
}

<div id="container"> 
 
    <div class="svg-wrapper" id="sw1"> 
 
     <svg id="svg1"></svg> 
 
    </div> 
 
    <div class="svg-wrapper" id="sw2"> 
 
     <svg id="svg2"></svg> 
 
    </div> 
 
    <div class="svg-wrapper" id="sw3"> 
 
     <svg id="svg3"></svg> 
 
    </div> 
 
</div>

、私は.svg-wrapper { padding-bottom: 100% }を追加しようとしたが、無駄に。

EDIT：基本的に、2つの条件が常に満たされるべきである。

1. 3つの<svg> sは常に正方形であるべきである：
2. 各<svg>の幅が1であるべきであるそれらの高さがその幅に等しいです。親の幅の3分の1。ページサイズが変更されるので、それは親の三分の一残るように親変化の幅は、各<svg>の幅も変更する必要

。 <svg>の高さも同じ量だけ変更する必要があります。したがって、高さと幅は常に同じです。

閉じる投票：私の質問は本当にthisと同じでした。私はWeb_Designer's great answerの部分がラッパーの相対位置とinside-div絶対の位置を指定しているのを見ていませんでした。

Answer 1

、私は適切にあなたの質問を理解することはできません

#container { 
 
    background-color: grey; 
 
} 
 
*{ 
 
    box-sizing:border-box; 
 
} 
 
.svg-wrapper { 
 
    background-color: red; 
 
    width: 33.33%; 
 
    float:left; 
 
} 
 

 
svg { 
 
    background-color: white; 
 
    max-width:100%; 
 
    border:1px solid #000; 
 
}

<div id="container"> 
 
    <div class="svg-wrapper" id="sw1"> 
 
     <svg id="svg1"></svg> 
 
    </div> 
 
    <div class="svg-wrapper" id="sw2"> 
 
     <svg id="svg2"></svg> 
 
    </div> 
 
    <div class="svg-wrapper" id="sw3"> 
 
     <svg id="svg3"></svg> 
 
    </div> 
 
</div>