保持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纵横比和调整父母的尺寸

回答

相关问题