调整背景图片大小

这真的是用于信息和学习的目的，同时学习更多关于JavaScript和CSS的内容。我有一个本地浏览器索引页，我想旋转背景图像onload。环顾四周，有不同的解决方案打后，我在此落户的基本循环功能：调整背景图片大小

<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>

在这个过程中，我只设置了backgroundSize为盖之前，以填补窗口，我是用的想法打在将图像设置为从数组中选择的背景图像之前调整图像大小。

我做了很多搜索，我发现的唯一真正的工作解决方案依赖于通过ID选择元素，但这也要求图像具有关联的ID，例如HTML中的IMG属性码。在这里，图像被选中并在CSS中设置JavaScript。

我试图与img.width/img.height和img.style.width/img.style.height，以及其他一些随机解我所遇到的设置图像尺寸，但每当我试图改变这些图像要么没有改变，要么不根本不显示。

function rotate() 
{ 
    var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg"); 
    var aImg = Math.floor(Math.random()*imgArray.length); 
    var img = imgArray[aImg]; 
    image = rsize(img); 
    document.body.style.background = "url(" + image + ") no-repeat"; 
    document.body.style.backgroundSize = "cover"; 
} 
function rsize(image) 
{ 
    image.style.width = "300px"; 
    image.style.height = "300px"; 
    return image; 
}

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

在此先感谢。

来源

2012-06-07 jb11

您必须在实际图像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位置在市中心如果你想要，你的网页。

工作演示在这里：http://jsfiddle.net/jfriend00/jqMtV/

来源

2012-06-07 17:02:40 jfriend00

可以，但不能与IMG元素... – Bergi

也就是类似于一个我之前尝试的解决方案，但没有'appendChild'。但它仍然不适用于图像元素。对我来说，这仍然是一个很好的信息，谢谢。 – jb11

@ jb11 - 我在我的代码示例中修复了一个错字。我还实施了一个工作演示，您可以在其中看到以图片为中心的CSS：http://jsfiddle.net/jfriend00/jqMtV/ – jfriend00

不，你没有<img>元素，你可以（重新）大小（顺便说一句，他们就不需要IDS可以进行选择）。您使用rsize(imgArray[aImg])对阵列成员进行操作，这些阵列成员是字符串而不是DOM元素，因此在它们不存在的style属性上设置值会引发错误。

然而，你已经在使用backgroundSize style property正确的方式。只是不要将它设置为cover，而是将其设置为您需要的大小！

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

如果你想使用<img>元素，在你<body>的最后补充一点：

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

来源

2012-06-07 17:04:59 Bergi

“backgroundSize”的缺点是IE9之前的IE不支持此功能。 – jfriend00

他已经在使用它，所以我确信这是OK ... – Bergi

我主要使用Firefox，为此我使用这个自定义索引页面。就像我说的那样，封面属性几乎照顾了我的问题，但我仍然有兴趣提出替代方法来解决问题。但这绝对是很好的信息。谢谢。 – jb11

调整背景图片大小

回答

相关问题