Javascript 调整背景图像的大小_Javascript_Html_Css_Image Resizing

Javascript 调整背景图像的大小

javascript html css

Javascript 调整背景图像的大小,javascript,html,css,image-resizing,Javascript,Html,Css,Image Resizing,这实际上是为了提供信息和学习，同时学习更多关于JavaScript和CSS的知识。我有一个本地浏览器索引页，我想在加载时旋转背景图像。环顾四周并使用不同的解决方案后，我决定使用以下基本旋转功能： <html> <head> <script language="javascript" type="text/javascript"> function rotate() { var imgArray = new Array("img1.jpg", "img2.

这实际上是为了提供信息和学习，同时学习更多关于JavaScript和CSS的知识。我有一个本地浏览器索引页，我想在加载时旋转背景图像。环顾四周并使用不同的解决方案后，我决定使用以下基本旋转功能：

<html>
<head>
<script language="javascript" type="text/javascript">
function rotate()
{
   var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
   var aImg = Math.floor(Math.random()*imgArray.length);
   var img = imgArray[aImg];
   document.body.style.background = "url(" + img + ") no-repeat";
   document.body.style.backgroundSize = "cover";
}
</script>
</head>
<body onload="rotate()">
</body>
</html>

我知道我可能做错了什么。在这种情况下，有没有办法调整这些图像的大小？还是有更好的方法来构建这个

提前感谢。

您必须在实际图像DOM对象上设置

image.style.width

和

image.style.height

，而不是像当前尝试的那样在URL上设置

由于图像对象不用于背景图像，因此无法直接执行您试图对背景图像执行的操作

您可以使用CSS

background size

属性，但这是一个相当新的属性，在IE9之前的IE版本中不受支持。如果您正在使用它，您将设置它的实际大小，而不是

“cover”

您还可以使用实际的DOM图像，然后将该DOM图像显示在页面的中心位置，如果这是您真正想要做的

例如，以下是创建DOM图像对象、为其分配URL、设置其大小并将其插入页面的方法：

var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var imgURL = imgArray[aImg];
var img = new Image();
img.src = imgURL; 
img.style.width = "300px";
img.style.height = "300px";
img.id = "centeredImage";
document.body.appendChild(img);

然后，如果需要，您可以使用CSS将位置设置在页面的中心

这里的工作演示：

不，您没有

backgroundSize的一个缺点是在IE9之前的IE中不受支持。我主要使用Firefox，为此我使用此自定义索引页。正如我所说，cover属性基本上解决了我的问题，但我仍然有兴趣提出其他解决问题的方法。但这绝对是个好消息。谢谢。虽然我仍打算尝试不同的方法，但这是解决我的大小调整问题的一个更简单的解决方案。@jfriend00我只在某些事情上使用IE，比如在创建要发布的页面时检查跨平台兼容性。我并不是说我以后再也不需要这样做了，但我近期的项目是专注于Firefox的本地索引页，这是我的主要浏览器。对不起，我想我在我的原始帖子中通过“本地浏览器索引页”明确了这一点。这与我之前尝试的一个解决方案类似，但是没有

appendChild

。但它仍然不能与图像元素一起工作。这对我来说仍然是很好的信息，谢谢。@jb11-我修复了代码示例中的一个打字错误。我还实现了一个工作演示，您可以在其中看到将图像居中的CSS：@jfriend00确实修复了它，它更符合我所设想的解决方案。此外，我认为这为我更多地使用CSS打开了机会。谢谢

var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var imgURL = imgArray[aImg];
var img = new Image();
img.src = imgURL; 
img.style.width = "300px";
img.style.height = "300px";
img.id = "centeredImage";
document.body.appendChild(img);

document.body.style.backgroundSize = "300px 300px";

<img src="some.jpg" style="position:fixed; z-index:-1; width:100%; height:100%" />