Изображения стека по центрированному svg

Вам нужно сделать .spotlightflexbox:

скрипка

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>

С вдохновением Джерарда и других сообщений в 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/