具有溢出隐藏父级的绝对定位图像

Question

我有一个父div .outer，我用它作为一个“窗口”，下面出现一个图像和一个热点。父div是设备的宽度，最大为960px。

在我的例子中，对于移动设备（360px宽度），我让骑车人的前轮出现在窗口的中央，但是当我展开窗口时，图像慢慢向左移动，推动车轮远离视线。

.container {
  max-width: 960px;
  min-width: 320px;
  margin: 0 auto;
}
.outer {
  border: 20px solid blue;
  overflow: hidden;
  position: relative;
}
.img {
  left: -26%;
  position: relative;
  top: 0;
}

<div class="container">
  <div class="outer">
    <img src="http://i345.photobucket.com/albums/p397/chieflagos/sports_zpsv08bhwa3.jpg" class="img" />
  </div>
</div>

我希望图像在窗口展开时向右移动，以便滚轮停留在窗口的中间。

我尝试过使用CSS vw和vh，但无济于事。