javascript

レスポンシブサイト等で画像を画面幅いっぱいに表示させる配置方法は多くのサイトで見ることができます。当サイトでもimg要素に対して、max-width:100%height:autoとCSSを設定して表示しています。

scalesize001resize_img001

そのようなサイトをスマートフォンから見たとき、横長画像は適切なサイズで表示されますが、縦長画像は左の画像のように画面をすべて占有する大きさで表示されます。

そのため、横長画像と縦長画像の大きさがまったく合わない状況になります。この問題を解決できないかと考えたのが今回の記事です。

JavaScriptを使用しサイト上の画像の幅と高さを比較して、高さのほうが大きい場合はCSSを適用して、縮小表示します。

デモ

See the Pen 画像の縦横比を判定して縮小表示(PC・スマートフォン適用) by Kentaro (@kentaro) on CodePen.

iPhone 6sのスクリーンショットのサイズと同サイズ(750×1334)の画像を画面幅の60%で縮小表示しています(スマートフォンからの閲覧の場合)。

JavaScript

function resizeImage(image) {
  // 取得したimg要素の幅と高さを取得
  var width  = image.clientWidth;
  var height = image.clientHeight;

  // ユーザーエージェントを取得
  var userAgent = window.navigator.userAgent;

  // 要素が幅<高さのときに縮小表示
  if(width < height) {
    // ユーザーエージェントでスマートフォンとPCを判定
    if(userAgent.indexOf("iPhone") != -1 || userAgent.indexOf("Android") != -1) {
      image.style.display = "block";
      // 親要素の幅の60%で表示
      image.style.width = "60%";
      // img要素をセンタリング表示
      image.style.margin = "0 auto";
      image.style.marginBottom = "30px";
    } 
  }
}

// img要素を取得
var images = document.getElementsByTagName("img");

for(var i = 0; i < images.length; i++) {
  resizeImage(images[i]);
}

処理の流れは以下の通りです。

  1. サイト上のimg要素を取得
  2. img要素の幅と高さを計測
  3. 幅<高さの条件に一致
  4. ユーザーエージェントでスマートフォンからの閲覧と判定
  5. CSSを適用して縮小表示

上記のJavaScriptコードでJSファイルを作成して、</body>直前で読み込むと動作します。

// 記事を取得
var elements = document.getElementsByClassName("post");
// img要素を取得
var images = elements[0].getElementsByTagName("img");

document.getElementsByTagNameを単独で使用すると、あまりにも要素の検索対象が多くなってしまうのでdocument.getElementsByClassNameである程度対象を絞ったほうが処理速度やパフォーマンスの面で良いかと思います。

// ユーザーエージェントでスマートフォンとPCを判定
if(userAgent.indexOf("iPhone") != -1 || userAgent.indexOf("Android") != -1) {
  ...
} else {
  ...
}

ユーザーエージェントの条件分岐のelseでPCやタブレットで適用したいCSSを記述することができます。

さいごに

JavaScriptの勉強も兼ねて、このサイトで気になっていた部分の修正を行ってみました。JavaScriptの書き方等でおかしい部分がありましたら、サイトのTwitterまでご連絡ください。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。