Question

我正在尝试使这些图像与窗口大小相同。我正在使用一些js代码来使背景动态化。我无法在中心对齐此元素并进行自我缩放。有帮助吗？非常感谢

!DOCTYPE html>
<html>
<head>
<script type='text/javascript'> 
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
    document.getElementById("myimage").src="http...0.jpg";
    imageID++;
}
else{if(imageID==1){
    document.getElementById("myimage").src="http...1.jpg";
    imageID++;
}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<link href="baba.css" rel="stylesheet" type="text/css">
</head>


<body style='background:#f1f2f4;  height:100%; width:100%; text-align:center;      position:absolute; ' onload='changeimage(2)'>
<img id='myimage' src='http...3.jpg'/>



</body>





</html>

现在图像根本没有响应

Answer 1

包含jQuery然后：

$("img").css("position", "absolute").css("top", 0).css("left", 0).css("bottom", 0).css("right", 0)

Answer 2

您可以放置<div>代码而不是<img>代码，并设置div的背景属性。

div#image-container{

background-image:url(http:/yoururl.com/image.jpg);
height:400px;
width:600px;
background-repeat:no-repeat;
background-size: 400px 600px;

}

您必须更改您的changeimage功能，以便更改背景图像网址。

Answer 3

你可以用CSS做到这一点。如有必要，使用Javascript更改背景图像。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

js背景图像相同的窗口大小

3 个答案: