我每隔几秒钟就会改变图像，同时也会以100%的高度和宽度响应缩放图像

I am having troubles with changing image every few seconds while also scaling the image responsively at 100% height and width

本文关键字：图像 100% 高度 缩放 响应 几秒 改变      更新时间：2023-09-26

我每隔几秒钟就会改变图像，同时也会在100%的高度和宽度下响应缩放图像。我不能在保持比例的情况下缩放。

http://jsfiddle.net/7wez07qn/3/, togetherjs = TlopaRQOy7

点击上面的链接，和我一起寻找我问题的解决方案。这真的很复杂，当我之前解释我的问题时，困惑和冗长的答案随之而来。我将负责协作组。

我的代码HTML 

<div class="Wrapper2">
  <div id="HomeRooms"> </div>
</div>
CSS 

#HomeRooms {
    position:absolute;
    top:0%;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#HomeRooms img{
    max-width:100%;
}
.Wrapper2 {
    width:100%;
    height:100%;
}
Javascript 

$(function(){
var picCount=0;  
var picArray= ["http://bit.ly/1uxYSSb","http://bit.ly/1oOrsO6"];
    nextPic();
 function nextPic()
  {  picCount=(picCount+1<picArray.length)? picCount+1 : 0;
     var build='<img border="0" src="'+picArray[picCount]+
     '" style="" />';
     document.getElementById("HomeRooms").innerHTML=build;
   setTimeout(function(){nextPic();},6000);
  }
});

为了获得最佳效果，请使用背景图像和background-size: cover。

演示HTML: 

<div id="HomeRooms"></div>
CSS: 

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#HomeRooms {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
JQUERY: 

$(function(){
var picCount=0;  
var picArray= ["http://bit.ly/1uxYSSb","http://bit.ly/1oOrsO6"];
nextPic();
function nextPic() { 
   picCount=(picCount+1<picArray.length) ? picCount+1 : 0;
   $("#HomeRooms").css('backgroundImage', 'url('+picArray[picCount]+')');
   setTimeout(function() {
       nextPic();},6000);
  }
});
相关文章：