如何仅使用百分比将容器的大小设置为图像的两倍？

Question

我正在尝试使用HTML和CSS获得全景图片的无限幻灯片。问题是我无法为容器设置合适的宽度，该容器应该是链接图片的大小乘以2。它使用的是像素而不是百分比，但我的目标是获得一个动态变化的循环。如果我将宽度设置为200％，则容器将是屏幕的两倍而不是图片，因此它不会是循环错觉。

html,
body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.photobanner {
  height: 100%;
  width: 200%;
  /*this should be twice as much as the image*/
  font-size: 0;
}

.photobanner img {
  height: 100%;
  width: 100%;
  /*image is resized to fit screen*/
}

.first {
  -webkit-animation: bannermove 20s linear infinite;
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -100%;
  }
}

<div class="container">
  <div class="photobanner">
    <img class="first" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Trafalgar_Square_360_Panorama_Cropped_Sky%2C_London_-_Jun_2009.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Trafalgar_Square_360_Panorama_Cropped_Sky%2C_London_-_Jun_2009.jpg">
  </div>
</div>