Question

我目前正在尝试将使用Flexbox制作的这些SVG旋钮图标添加到电子应用中。要注意的是，无论浏览器大小like so是多少，它们都必须保持在矩形图标的中心。因此，理想情况下，随着浏览器尺寸的变化，它们将保持在该矩形内并在其中保持比例。

现在，随着图标因更改浏览器窗口尺寸而缩放，图标相对于illustrated here.框的上移和下移位置

当前，我已经设置了应用程序的浏览器窗口，以使其保持恒定的宽高比。

这是我相关的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>

这是我的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是我的SVG，其代码太长，无法包含在帖子中。我可以在其中包括的一个重要细节是SVG的视图框，即：“ 0 0 72 66.5”在上面的代码中，我将图像的宽度设置为〜13％，因为那是SVG与背景的宽度（以百分比形式）。

Answer 1

我会更改您的标记（删除<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>

并将该div的css更新为此：

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

SVG缩放并保持其相对于div的位置

1 个答案: