jb1*_*b11 2 html javascript css image-resizing
这实际上是出于信息和学习目的，同时更多地了解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>
在此过程中，在我仅设置backgroundSizeas封面来填充窗口之前，我想过要调整图像的大小，然后再从数组中选择它们，然后再将它们设置为背景图像。
我进行了很多搜索，找到的唯一可行的解决方案依赖于按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;
}
我知道我可能在这里做错了。在这种情况下，是否可以调整这些图像的大小？还是有更好的方法来构造它？
提前致谢。
您必须设置image.style.width与image.style.height实际图像DOM对象上，而不是在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/
| 归档时间： |
|
| 查看次数： |
4154 次 |
| 最近记录： |