画像の高さを取得して指定サイズ以下の場合クラスを付与する

お客様に更新していただくCSMを使用していると
投稿する画像ごとに解像度や画像比率がことなることってしょっちゅうですよね？

それがせいぜい10枚くらいであればこっちでちゃーっと修正するんですが
100枚とか1000枚とか超えるとやってられないし
その後お客様が投稿する際にリサイズして投稿してくれるわけでもない！
ということで横幅はCSSで調整して、画像の縦サイズがあるサイズを超えたら
クラスを付与してCSSでそれようの制御をかける方法をご紹介します。

まずはデモから！

See the Pen 画像の高さを取得して指定サイズ以下の場合クラスを付与する by sayuri (@giraffeweb) on CodePen.default

HTMLやCSSはお好み合わせて変更してください。

私の場合、画像の縦サイズが220pxよりも小さければimgタグに「mvg」というクラスを付与しなさい
という記述をしています。

$(window).on('load', function () {
     /* imgの読み込みに時間がかかるのでページ全体を読み込んでから実行 */
     $('.spotImg img').each(function (index) {
          var addimgClass = $(this).height();
          if (addimgClass < 220) {
               $(this).addClass('mvg');
          } else {
               $(this).removeClass('mvg');
          }
     });
});

これで高さがたりない画像については「mvg」というクラスがついたので
あとはCSSで自由にいじれますよね！
皆さんもぜひおためしください。

Share: