保持SVG縱橫比和調整父母的尺寸

我在容器<div>（容器內的<div>）內並排放置了三個<svg>。保持SVG縱橫比和調整父母的尺寸

每個<svg>應始終佔據其直接父的寬度的三分之一和具有等於其寬度的高度。

這意味着，隨着窗口的大小調整，寬度變得越來越小或越來越大，其高度也應該如此，容器的高度也應該如此，以便容器的高度爲<div>。

#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>

在this答案的建議，我嘗試添加.svg-wrapper { padding-bottom: 100% }，但無濟於事。

編輯：基本上，兩個條件應始終滿足：

三個<svg> S的關係始終是正方形：其高度等於其寬度
每個<svg>的寬度應該是一個 - 他們父母的寬度的三分之一。

當父變化的寬度，因爲頁面的大小時，各個<svg>的寬度也應改變使得其保持母體的三分之一。每個<svg>的高度也應該改變相同的量，因此高度和寬度總是相等的。

投票予結束：我的問題與this真的一樣。我沒有看到Web_Designer's great answer的那部分指定了包裝的相對位置和div的絕對位置。

來源

2017-06-14 Randoms

我不能正確理解你的問題。你能多解釋一下嗎？ – Aslam

您無法保持某些東西的寬高比，並且不得不約束寬度和高度。它是什麼，以什麼方式？ –

@RobertLongson我的意思是限制寬高比（它應該總是1：1）和寬度（它應該始終是容器的1/3）。高度應該始終等於寬度，並隨寬度而變 – Randoms

看答案下面

#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>

來源

2017-06-14 08:37:16

這並不是'似乎維持縱橫比。 – Randoms

保持SVG縱橫比和調整父母的尺寸

回答

相關問題