3

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

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

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

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

4

4 回答 4

7

参考： 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，请选择您可以接受的值。

赏金编辑：

将这些 CSS 设置与4chan-x Greasemonkey 脚本一起使用时，模糊图像不再是问题，以使缩略图大小增加一倍。

请注意，您需要删除Disable 4chan's extension在 Greasemonkey 脚本中自动应用的默认复选标记，可通过单击网页右上角的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并确保您有CheckmarkforCustom CSS然后按SAVE Button退出。

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

赏金编辑：提醒上图显示了基本部分中应删除的复选标记。可以肯定的是，首页右上角会有 4Chan 的原始设置菜单在中间：

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

于 2012-12-14T06:35:12.633 回答
0

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

所以你需要运行你的代码来加倍<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'; });
于 2012-12-14T02:06:31.817 回答
0

我认为即使是 CSS 解决方案也适合您（根据您的问题）。如果对真正的 DOM 宽度和高度没有限制，您也可以使用 CSS 转换。 

img {
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -ms-transform: scale(2,2);
    /* etc. */
    transform: scale(2,2);
}
于 2012-12-23T16:42:18.957 回答
-1

在 JavaScript 中尝试：

for (i=0; i < document.images.length; i++) {
    document.images[i].height *= 2;
    document.images[i].width *= 2; 
}
于 2012-12-14T01:48:23.577 回答