1

I have three <svg>s side by side in a container <div> (inside a container <div>).

Each <svg> should always take up one-third of its immediate parent's width and have a height equal to its width.

This means that as the window is resized, and the <svg>s' width become smaller or larger, so should their heights, and so should the height of the container <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>

On the advice of this answer, I tried adding .svg-wrapper { padding-bottom: 100% }, but to no avail.

EDIT: Basically, two conditions should always be satisfied:

  1. The three <svg>s should always be square: their height is equal to their width
  2. The width of each <svg> should be one-third of their parent's width.

When the width of the parent changes because the page is resized, the width of each <svg> should also change so that it remains one-third of the parent. The height of each <svg> should also change, by the same amount, so height and width are always equal.

Voted to Close: My question was really the same as this. I didn't see the part of Web_Designer's great answer that specified making the position of the wrapper relative and the position of the inside-div absolute.

Randoms
  • 2,110
  • 2
  • 20
  • 31
  • I can't understand your question properly. Would you explain a bit more. – Aslam Jun 14 '17 at 07:02
  • You can't maintain the aspect ratio of something and constrain both the width and the height, something has to give. What is it and in what way? – Robert Longson Jun 14 '17 at 07:20
  • @RobertLongson I mean to constrain the aspect ratio (it should always be 1:1) and the width (it should always be 1/3 of the container). The height should always be equal to the width, and vary with the width – Randoms Jun 14 '17 at 15:11
  • @hunzaboy Please see my edit. – Randoms Jun 14 '17 at 15:16
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Randoms Jun 14 '17 at 17:58

1 Answers1

0

See the Solution Below

#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>
Usman Mughal
  • 93
  • 8