Question

我在容器<svg>中放置了三个<div>（在容器<div>内）。

每个<svg>应始终占据其直接父级宽度的三分之一和的高度等于其宽度。

这意味着当窗口调整大小，<svg> s'宽度变小或变大时，它们的高度也应如此，容器的高度也应如此<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>应始终为方形：它们的高度等于它们的宽度
每个<svg>的宽度应为其父级宽度的三分之一。

当父级的宽度因页面大小调整而发生变化时，每个<svg>的宽度也应该更改，以使其保持父级的三分之一。每个<svg>的高度也应该改变相同的量，因此高度和宽度总是相等的。

投票结束：我的问题与this非常相似。我没有看到Web_Designer's great answer指定了包装器相对位置和内部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>

保持SVG纵横比并调整父级

1 个答案: