如何将网页上每张图片的大小加倍？
有一个网页,我想将所有图像的大小加倍.我不知道任何JavaScript或CSS.有人可以给我写一些代码吗？我试过这个:
Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){
i.width = i.width * 2;i.height = i.height * 2
});
但我不知道我在做什么,而且它不起作用.请帮忙.
这就是我试图加倍的元素,如果有任何帮助的话:
参考: http://boards.4chan.org/g/
我发现这个网站为用户提供了一个很棒的功能,包括内置的缩略图图像的自定义查看功能!
4Chan主页设置菜单
该菜单提供了很多选项来配置您认为合适的网页.我很震惊地看到一个Custom CSS功能显示CSS Box哪个会接受你自己的自定义标记来定制网站到标记级别!更多关于这一点.
首先,我想提一下,它们确实提供了两个可以满足缩略图查看要求的即用型选项.
赏金编辑:用户致4chan的-X的Greasemonkey脚本已经在这两个选项4chan的Qt的«Qualitythumbnails»设置菜单.如果您使用此脚本,请跳至下面的下一个编辑.
看一下这个屏幕截图,其中显示了要执行的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 extensionGreasemonkey脚本中自动应用的默认选中标记,可通过单击网页右上角的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并确保您有一个Checkmarkfor Custom CSS,然后按SAVE Button退出.
然后,该页面将使用这些新设置刷新自身.享受你的2x缩略图.
Bounty编辑:提醒上面的图片显示了Essential部分中应该删除的复选标记.可以肯定的是,右上方的主页将在中间设置4Chan的原始设置菜单:
[4chan Qt«质量缩略图设置] [设置] [主页]