開発の経緯

画像ファイルは縦撮りだったり横撮りだっりする上に、画像解像度もまちまち何ですけど、とりあえず長辺どっちかで自動的に表示する方法考えてください。

と言われたのでJavaScriptで組みたい私はちょっと考えてみた次第です。

どっちかに合わせて見る

奥さんが晩御飯の生姜焼きを支度している傍ら、愛機MacBook Airを持ち込んでダイニングプログラミングを開始。

こんな風に組んでみました。

ちょっと忘れてたことがあって追加しました（汗）。

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="./js/ImageStyleResizer.js"></script>
<script src="./js/sample.js"></script>

<img data-src="./img/images1.jpeg" class="test" />
<img data-src="./img/images2.jpeg" class="test" />

JavaScript

下記はX或いはYを320ピクセルか240ピクセルに、どちらか長い方を長辺とする指定をしています。

フェイドを指定しているのはチェーンメソッドが成功するか確認してるだけなので、皆さんは真似しないでください。

$('.test').ppImageStyleResizer(320,240);

にするだけで正解を得られます。

//sample.js
$(function ()
{
  $('.test').ppImageStyleResizer(320,240).fadeTo("slow", 0.33).fadeTo("slow", 1.00);
})

なんだよ、ImageStyleResizerって？

はい、今回組んだのはここです。

ImageStyleResizer.js
/**
 * [Image Tag Style Resizer V.1.00]
 * Copyright (c) [2017] [(fD)Pinchos.Ponchos]
 * http://qiita.com/fd2016ta
 * This software is released under the MIT License.
 * @param  {[type]} $
 * @return {[type]}
 */
(function( $ )
{

  /**
   * [Image Tag Style Resizer]
   * I will apply the style to the long side.
   * @param  {[type]} maxX [Max Width px]
   * @param  {[type]} maxY [Max Height px]
   */
  $.fn.ppImageStyleResizer = function(maxX, maxY)
  {
    var imageWidth;
    var imageHeight;

    var resultX;
    var resultY;

    this.hide();

    for(var indexElement = 0 ; indexElement < this.length ; ++indexElement ) {

      $(this[indexElement]).attr('src', $(this[indexElement]).attr('data-src'));

      imageWidth = $(this[indexElement]).width();
      imageHeight = $(this[indexElement]).height();

      if (imageWidth > imageHeight) {
        resultX = maxX;
        resultY = imageHeight * (maxX / imageWidth);
      } else {
        resultX = imageWidth * (maxY / imageHeight);
        resultY = maxY;
      }

      $(this[indexElement]).css({'width': resultX, 'height': resultY});
      $(this[indexElement]).show();
    }

    return (this);

  };
})(jQuery);

jQueryと組み合わせるといい感じになりました。