img fitter

  • /*
     * @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
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2015/05/19 05:46:43 - 2015-05-19
  2. 2015/05/19 03:58:13 - 2015-05-19
  3. 2015/05/18 03:46:29 - 2015-05-18
  4. 2015/04/27 06:46:52 - 2015-04-27
  5. 2015/04/08 05:08:07 - 2015-04-08
  6. 2015/04/01 04:39:04 - 2015-04-01
  7. 2015/03/30 09:02:29 - 2015-03-30
  8. 2015/03/30 08:48:03 - 2015-03-30