3

すべての画像のサイズを2倍にしたいWebページがあります。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/

サムネイル画像のカスタマイズされた表示が組み込まれているなど、このWebサイトがユーザーに提供する優れた機能を発見しました。

4Chanホームページ設定メニュー

そのメニューには、適切と思われる方法でWebページを構成するための多くのオプションが用意されています。独自のカスタムマークアップを受け入れてサイトをマークアップレベルに調整するCustom CSS機能を表示する機能を見て驚いた！CSS Boxこれについてはもう少し詳しく説明します。

まず、サムネイルの表示要件を満たす2つのすぐに使用できるオプションが提供されていることをお伝えしたいと思います。

バウンティ編集：4chan-x Greasemonkeyスクリプトのユーザーは、 4chan Qt≪品質サムネイル≫設定メニューにこれらの2つのオプションをすでに持っています。このスクリプトを使用している場合は、以下の次の編集にスキップしてください。

このスクリーンショットを見てください。このスクリーンショットは、実行する3つのステップを示しており、ステップ2はどちらか一方です。

下の画像を右クリックして、それが役立つ場合はフルサイズで表示します。

Open Image in New Tab / View Image

ここに画像の説明を入力してください

上記のステップ1では、スクリプトではなく、をSettings反映していることに注意してください。4chan Homepage

上記のステップ2aでは、これにより平均的な画像の2倍の画像サイズが厳密に再現されますが、これらの画像が非常に大きい場合は、使用可能なブラウザの幅が使用されます。

上記のステップ2bでは、ブラウザの幅のサイズまで存在する場合、代わりにこの選択により超大きな画像が表示されます。

これらの2つのすぐに使用できるサムネイルオプションのどちらもあなたの好みに合わない場合は、読み続けてください。

当初の目標はサムネイルを2倍のサイズで表示することであるため200%、ウェブページを分析して、これらのサムネイル画像をそのサイズで表示するために必要な最小限の設定を決定しましたが、品質が低いため、多くの場合、2倍のサイズでぼやけることに注意してください。増加しません。どのサイズでもぼやけていない画像の解決策については、以下のバウンティ編集を参照してください。

そうは言っても150%、ぼかしを最小限に抑えながら拡大するか、Greasemonkeyを使用したくない場合は許容できる値を選択することができます。

バウンティ編集：

これらのCSS設定を4chan-xGreasemonkeyスクリプトで使用して、サムネイルのサイズを2倍にする場合、ぼやけた画像は問題になりません。

ウェブページの右上隅にある4chanQt≪品質サムネイル≫設定Disable 4chan's extensionリンクをクリックしてアクセスできるGreasemonkeyスクリプトで自動的に適用されるデフォルトのチェックマークを削除する必要があることに注意してください。

その設定メニューを終了したら、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、を押してforSave CSS Buttonがあることを確認してから、を押して終了します。CheckmarkCustom CSSSAVE Button

その後、ページはこれらの新しい設定で更新されます。2倍のサムネイルをお楽しみください。

バウンティ編集：上の画像は、削除する必要があるエッセンシャルセクションのチェックマークを示していることを思い出してください。確かに、ホームページの右上には4Chanの元の設定メニューが中央にあります。

[4chan Qt≪品質サムネイル≫設定] [設定] [ホーム]

于 2012-12-14T06:35:12.633 に答える
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 に答える
0

<img>前にコメントで述べたように、CSSプロパティのため、コードは非html要素の背景画像である画像に触れませんbackground-image。

<img>したがって、両方のコードを実行してタグを二重化する必要があります。

background-sizeまた、CSSプロパティをに設定する必要があります200% Auto。

もちろん、問題は、cssプロパティを何に追加するかです。4chanの画像もすべてリンクされている可能性があります。<a>したがって、それらは。付きのアンカータグである必要がありますbackground-image。

申し訳ありませんが、私はオフィスにいるので、それを確認するために4chanを開くことはしません。

ただし、この同じWebサイトでこのコードを試すことができます。

$('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 に答える
-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 に答える