具有特殊风格的背景网址

Question

我使用此代码生成一些无尽的运行横幅：

＆＃13;

＆＃13;

<style>
  #myimage {
    position: fixed;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bildschirm-senkrechter-strich.jpg") repeat-x scroll 0% 0% / contain;
  } 
</style>

<div id="myimage">.</div>



<script>
    var offset = 0
    setInterval(function() {
        offset +=1
        document.getElementById("myimage").style.backgroundPosition = offset + 'px 0px';
    },50)
</script>

＆＃13;

＆＃13;

＆＃13;

对于我的问题：现在我希望每张图片的尺寸都达到屏幕的100％。

我想过只添加属性......

background-size: 100%;

......但它似乎并没有这样做。

  

如何在不删除样式属性的情况下将每个图像的宽度设置为屏幕宽度的100％？

Answer 1

增加div的高度并尊重图像的比例：

var offset = 0
    setInterval(function() {
        offset +=1
        document.getElementById("myimage").style.backgroundPosition = offset + 'px 0px';
    },50)

#myimage {
    position: fixed;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bildschirm-senkrechter-strich.jpg") repeat-x scroll 0% 0% / contain;
    
    /* you image is 1000x433 so we need 43.3% of width*/
    padding-bottom:43.3%;
    background-size:cover;
  }

<div id="myimage"></div>