无限自动滚动img HTML分辨率

Question

我正在尝试在html和css中使img自动滚动无限。这是我使用的代码：

@keyframes ani{
0%{background-position: 0 0;}
100%{background-position: 1000000vw 0;}
}
div.map {background:url(https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046) repeat-x 0 / 100% auto;
height:500px;
animation: ani 100000s linear infinite ;
}

<div class="map"></div>

对于大多数部分来说，它工作正常，但是由于宽度自动设置为100％，因此在调整大小时，图像下方是否有很多空白？任何想法如何摆脱它？预先感谢。