SVG scaling and maintaining its position relative to a div

I am currently trying to add these SVG knob icons I made into an electron app using flexbox. The catch is that they need to stay positioned in the center of the rectangle icon no matter the browser size, like so. So ideally, as the browser dimensions change, they stay confined to that rectangle and maintain their proportions within it.

Right now, as the icon scales from changing the browser window dimensions, the icons' positions over and under-shoot relative to the box, illustrated here.

Currently, I have set the browser window of the app so that it maintains a constant aspect ratio.

Here is my relevant HTML:

<body>
  <div id="container" class="app-graphics">
    <img src="/X/Electron/smoothiebro1/img/Rectangle 2.svg" id="blenderOutline">
    <!-- Made the width = 91% for the svg below, 
         because it was width of the bottomBar / width 
         of the "blenderOutline" -->
    <div id = "barDiv"> 
      <img 
        src="/X/Electron/smoothiebro1/img/bottomBar.svg" 
        id="bottomBar" 
        class="container" 
        width="91%"
      > 
    </div>
    <div class="flexContainerKnobs">
      <ul class="flexContainerKnobs">
        <img src="img/Knob1.svg" id="knob1" class="knob" width="13.32%">
        <img src="img/Knob1.svg" id="knob2" class="knob" width="13.32%">
        <img src="img/Knob1.svg" id="knob3" class="knob" width="13.32%">
        <img src="img/Knob1.svg" id="knob4" class="knob" width="13.32%">
      </ul>
    </div>
  </div>
</body>

And here is my CSS:

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden
}

#blenderOutline {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: none;
  padding: 0;
}

#bottomBar {
  position: absolute;
  border: none;
  margin: 0 auto;
  bottom: 3%;
  left: 5%;
}

#barDiv {
  text-align: center;
}

.flexContainerKnobs{
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 108%;
}

.knob{
margin: 0 auto;
}

ul {
  position: absolute;
  top: 8px;
  left: 16px;
}

Here is my SVG, the code for it was too long to include in the post. An important detail which I can include here though is the SVG's viewbox, which is: "0 0 72 66.5" In the above code, I made the widths for the images ~13% because that was the ratio of the width of the SVG to the width of the background (in percent form).

728x90

1 Answers SVG scaling and maintaining its position relative to a div

I would change your markup to this (removing the <ul/>)

<div class="flexContainerKnobs">
  <img src="img/Knob1.svg" id="knob1" class="knob" width="13.32%">
  <img src="img/Knob1.svg" id="knob2" class="knob" width="13.32%">
  <img src="img/Knob1.svg" id="knob3" class="knob" width="13.32%">
  <img src="img/Knob1.svg" id="knob4" class="knob" width="13.32%">
</div>

and update the css for that div to this:

.flexContainerKnobs{
  width: 100%;
  margin-top: 108%;
  display: flex;
  align-items: center;
  justify-content: center;
}

6 months ago