如何将网页上每张图片的大小加倍？

Question

有一个网页，我希望将所有图片的大小加倍。我不知道任何JavaScript或CSS。有人可以给我写一些代码吗？我试过这个：

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){
    i.width = i.width * 2;i.height = i.height * 2
});

但我不知道我在做什么，而且它不起作用。请帮忙。

这就是我试图加倍的元素，如果有任何帮助的话：

http://puu.sh/1AEes.png

Answer 1

参考： http://boards.4chan.org/g/

我发现这个网站为用户提供了一个很棒的功能，包括内置的缩略图图像的自定义查看功能！

4Chan主页设置菜单

该菜单提供了很多选项来配置您认为合适的网页。我很惊讶地看到一个Custom CSS功能显示CSS Box，它将接受您自己的自定义标记，以便将网站定制到标记级别！更多相关内容。

首先，我想提一下，他们确实提供了 TWO 随时可以使用的选项，以满足您的缩略图查看要求。

Bounty编辑： 4chan-x Greasemonkey script的用户已经在 4chan Qt«质量缩略图设置菜单。如果您使用此脚本，请跳至下面的编辑。

看一下这个屏幕截图，其中显示了要执行的3个步骤，其中第2步是其中之一。

如果有帮助，请右键点击下面的图片并查看完整尺寸：

Open Image in New Tab / View Image

在上面的第1步中，请注意Settings反映的是4chan Homepage，而不是脚本。

在上面的步骤2a 中，这将为平均图像精确地重现双倍图像尺寸，但如果这些图像超大，则会使用可用的浏览器宽度。

在上面的步骤2b 中，如果该选项存在于浏览器的宽度范围内，则此选项将显示超大图像。

如果这两个即用型缩略图选项都不符合您的口味，请继续阅读。

由于您最初的目标是查看缩小尺寸的两倍或200%的缩略图，因此我分析了网页以确定以该尺寸显示这些缩略图图片所需的最小设置，但请注意许多将会模糊因为质量没有增加，所以尺寸是原来的两倍。请参阅下面的Bounty EDIT，了解任何尺寸都不模糊的图像。

话虽如此，您可以选择150%以尽量减少模糊，同时还可以放大模糊，或者如果您不想使用Greasemonkey，请选择您可接受的值。

---

Bounty编辑：

使用这些带有4chan-x Greasemonkey Script的CSS设置时，模糊图像不再是缩略图的两倍。

请注意，您需要删除在Greasemonkey脚本中自动应用于Disable 4chan's extension的默认选中标记，可通过单击顶部的 4chan Qt«质量缩略图设置链接访问 - 网页的右上角。

退出该设置菜单后，请输入 4chan 主页设置菜单。删除自定义CSS的所有复选标记，除。可以肯定的是，上图并未删除 4chan-x 推荐的所有复选标记。

---

警告：使用自定义CSS设置选项可以使设置菜单无法访问！您需要使用inspect element中内置的浏览器即时进行实时更改以重新获得控制权。

下面的框不是图像。选择，复制，然后将此CSS粘贴到设置菜单CSS框中：

div.file, a.fileThumb img {
  width: 200% !important;
  height: 200% !important;
  float: left; 
}

.fileInfo {
  margin: 10px;
}

要清楚，这是该框的截图：

将上述代码粘贴到CSS Box后，按Save CSS Button并确保Checkmark为Custom CSS，然后按SAVE Button退出。

然后，该页面将使用这些新设置自行刷新。享受你的2x缩略图。

Bounty编辑：提醒上面的图片显示了Essential部分中应该删除的复选标记。可以肯定的是，主页右上方将在中间设置4Chan的原始设置菜单：

  

[4chan Qt«质量缩略图设置] [设置] [主页]

Answer 2

正如我之前在评论中提到的，由于CSS属性<img>，您的代码不会将背景图像的图像触及非background-image html元素。

因此，您需要同时运行代码以加倍<img>个标记。

您还需要将CSS属性background-size设置为200% Auto。

现在问题是，你想要添加css属性。有可能4chan上的所有图像也都是链接。因此，他们必须使用<a>锚定background-image个标记。

抱歉，我在办公室，所以我不会打开4chan确认。

但您可以在同一网站上试用此代码：

$('a').css('background-size', '200% Auto');

我的快速解决方案使用jQuery，但你明白了。

<强>更新

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){i.width = i.width * 2;i.height = i.height * 2});

Array.prototype.forEach.call(document.getElementsByTagName('a'),function(i){i.style['background-size'] = '200% Auto'; });

Answer 3

我认为即使是CSS解决方案也适合你（来自你的问题）。如果对实际DOM宽度和高度没有限制，您也可以进行CSS转换。

img {
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -ms-transform: scale(2,2);
    /* etc. */
    transform: scale(2,2);
}

Answer 4

在JavaScript中尝试：

for (i=0; i < document.images.length; i++) {
    document.images[i].height *= 2;
    document.images[i].width *= 2; 
}