在居中的 svg 上堆叠图像答案

【问题标题】：Stack images over a centred svg在居中的 svg 上堆叠图像
【发布时间】：2017-07-11 13:35:06
【问题描述】：

我现在正在玩 svg 和 flexbox，我想在居中的 svg 上堆叠一张图片。

图像应该在 svg 的中心，我还想实现图像与 svg 成比例地缩放。

是否可以使用 flexbox 来实现这一点，还是我应该考虑其他方法？

HTML：

<div class="container">
  <div class="main">
    <div class="spotlight">
      <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" />
      <svg id="circle-bg" viewBox="0 0 100 100">
        <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle>
      </svg>
    </div>
  </div>
</div>

CSS：

body {
  background-color: #EBEBED;
  margin: 0;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spotlight {
  width: 50vw;
  max-height: 75vh;
}

.sneaker {
  position: absolute;
  width: 50%;
}

#circle-bg {
  height: 75vh;
}

JSFiddle:https://jsfiddle.net/hvgom8o3/

预期结果：

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您需要将.spotlight 设为弹性框：

Fiddle

body {
  background-color: #EBEBED;
  margin: 0;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spotlight {
  width: 50vw;
  max-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sneaker {
  position: absolute;
  width: 50%;
}

#circle-bg {
  height: 75vh;
}

<div class="container">
  <div class="main">
    <div class="spotlight">
      <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" />
      <svg id="circle-bg" viewBox="0 0 100 100">
        <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle>
      </svg>
    </div>
  </div>
</div>

【讨论】：

谢谢杰拉德，但我的问题现在只是部分解决了。我仍然遇到的问题是鞋子不在圆圈中间，当我调整窗口大小时，它与 svg 分组。
为了完美的垂直对齐，您需要调整图像。鞋子周围有很多空间，这使得鞋子本身看起来太低了。
我想实现水平和垂直对齐，但即使在您的示例中替换图像我也无法实现。

【解决方案2】：

在 Gerard 和 Stackoverflow 上其他帖子的启发下，我找到了一个顺利的解决方案。

将自动边距应用于绝对定位的图像并结合将顶部、右侧、底部和左侧设置为零，成功了。

HTML：

<div class="container">
  <div class="main">
    <div class="spotlight">
      <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" />
      <svg id="circle-bg" viewBox="0 0 100 100">
        <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle>
      </svg>
    </div>
  </div>
</div>

CSS：

body {
  background-color: #EBEBED;
  margin: 0;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spotlight {
  width: 50vw;
  max-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sneaker {
  position: absolute;
  width: 70%;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

小提琴：http://jsfiddle.net/146t817h/1/

【讨论】：