img fitter

by noromanba 2015-05-19 [2015/05/19 05:46:43]

fit image to window

@@ -24,8 +24,7 @@
     slice.call(ctx.querySelectorAll('img, [style*="background-image"]')).forEach(function (node) {
       node.style.maxHeight = Math.min(
         window.innerHeight,
-        document.documentElement.clientHeight,
-        document.body.clientHeight // XXX side effects
+        document.documentElement.clientHeight
       ) + 'px';
       node.style.width = 'initial';
       node.style.backgroundRepeat = 'no-repeat';

• /*
   * @title img fitter
   * @description fit image to window
   * @include http://example.com/user-include-as-you-like/*
   * @license MIT License http://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // synergy w/ Tab navigation as UserScript c.f.
  // http://let.hatelabo.jp/noromanba/let/hJmeuMHlo4hw
  // http://let.hatelabo.jp/noromanba/let/hLHW67STx8oc
  
  // e.g.
  // http://www.moae.jp
  
  // TODO observe window resize
  (function () {
    var document = window.document,
        slice = Array.prototype.slice;
  
    var fit = function (ctx) {
      if (!ctx.querySelectorAll) return;
  
      slice.call(ctx.querySelectorAll('img, [style*="background-image"]')).forEach(function (node) {
        node.style.maxHeight = Math.min(
          window.innerHeight,
          document.documentElement.clientHeight
        ) + 'px';
        node.style.width = 'initial';
        node.style.backgroundRepeat = 'no-repeat';
      });
    };
    fit(document.body);
  
    new MutationObserver(function (records) {
      records.forEach(function (record) {
        fit(record.target);
      });
    }).observe(document.body, { childList: true, subtree: true });
  }());
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。