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

Question

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

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

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

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

Answer 1

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

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

4Chan主页设置菜单

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

首先，我想提一下它们确实提供了两个可以满足缩略图查看要求的即用型选项。

赏金编辑： 4chan-x Greasemonkey脚本的用户已经在4chan Qt«质量缩略图设置菜单中有这两个选项。 如果您使用此脚本，请跳至下面的下一个编辑。

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

右键单击下面的图像，如果有帮助，请以完整大小查看 ：

Open Image in New Tab / View Image

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

在上面的步骤2a中 ，这将为平均图像紧密地再现双图像尺寸，但是如果这些图像是超大的，则它们将使用可用的浏览器宽度。

在上面的步骤2b中 ，如果存在直到浏览器宽度大小，则该选择将显示超大图像。

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

由于您最初的目标是以两倍大小或200%查看缩略图，因此我分析了网页以确定以该大小显示这些缩略图图像所需的最小设置，但请注意，由于质量没有提高。 有关任何尺寸均不模糊的图像的解决方案，请参阅下面的Bounty EDIT。

话虽如此，您可以选择150%来最小化模糊，同时仍然放大模糊，或者如果您不想使用Greasemonkey，请选择您可接受的值。

---

赏金编辑：

使用带有4chan-x Greasemonkey脚本的 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 ，确保您有Custom CSS的复选Checkmark ，然后按“ SAVE Button退出。

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

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

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

Answer 2

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

所以你需要运行你的代码来加倍<img>标签。

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

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

对不起，我在办公室，所以我不打开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; 
}