如何更改javascript幻灯片中图像的背景大小
我有一个基本的幻灯片，3张图片，以2.5秒的间隔自动循环。然而，幻灯片只是在我的网页顶部，所以它会拉伸图片。我正在尝试将图像大小设置为full，并使用图像精灵将图像与我喜欢的图像对齐。目前幻灯片正在播放，但图像仍处于拉伸状态。有没有办法使幻灯片中的图像不拉伸 这是我的密码：如何更改javascript幻灯片中图像的背景大小,javascript,html,css,image,slideshow,Javascript,Html,Css,Image,Slideshow,我有一个基本的幻灯片，3张图片，以2.5秒的间隔自动循环。然而，幻灯片只是在我的网页顶部，所以它会拉伸图片。我正在尝试将图像大小设置为full，并使用图像精灵将图像与我喜欢的图像对齐。目前幻灯片正在播放，但图像仍处于拉伸状态。有没有办法使幻灯片中的图像不拉伸 这是我的密码： <head> <style type="text/css"> .bgpic { height: 50%; width: 100%; } #pict { width: 100%
<head>
<style type="text/css">
.bgpic {
height: 50%;
width: 100%;
}
#pict {
width: 100%;
height: 100%;
background: url('/Junk/1.jpg') 0 -150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<script type="text/javascript">
var image1 = new Image()
image1.src="/Junk/1.jpg";
var image2 = new Image()
image2.src="/Junk/2.jpg";
var image3 = new Image()
image3.src="/Junk/3.jpg";
</script>
</head>
<body>
<div class="bgpic">
<img src="/Junk/1.jpg" id="pict" name="slide" style="-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<script type="text/javascript">
var step=1;
function slideit() {
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
document.getElementById("pict").style.backgroundSize="cover";
if (step<3){
step++;
}
else {
step=1;
}
setTimeout("slideit()", 2500)
}
slideit();
</script>
</div>
</body>
.bgpic{
身高：50%；
宽度：100%；
}
#皮克特{
宽度：100%；
身高：100%；
背景：url（'/Junk/1.jpg'）0-150px；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
var image1=新图像（）
image1.src=“/Junk/1.jpg”；
var image2=新图像（）
image2.src=“/Junk/2.jpg”；
var image3=新图像（）
image3.src=“/Junk/3.jpg”；
var阶跃=1；
函数slideit（）{
如果（！document.images）
返回；
document.images.slide.src=eval（“image”+step+“.src”）
document.getElementById（“pict”）.style.backgroundSize=“cover”；
如果（stepusecontain
而不是cover
如果你不想让它拉伸，在我添加幻灯片之前，我用cover
得到了我想要的图像。问题是javascript幻灯片没有识别出我希望图片是cover
，所以它们保持拉伸状态。只有背景大小才有效对于背景图像，它不会影响在img src中加载的图像的显示，并且您的img元素会被拉伸，因为您正在cssOk中设置宽度/高度百分比，是否有任何解决方法？是而不是设置图像。src设置背景图像的样式：element.style.backgroundImage=“url(http://some.url.to.image.com/someimage.jpg)“；
，还有为什么要使用eval进行字符串连接？