画像のサイズを取得して、条件によって割り当てるクラスを変える

###実現したいこと

<div class="row">内の<img>のオリジナルのサイズを取得して、横幅がの方が大きい画像を読み込んでいる場合の<img>タグには、 .width_max{ width:100%; } というクラスを振り、縦幅がの方が大きい画像を読み込んでいる<img>タグには、 .height_max{ height: 100%; } というクラスを振るような動作を javascriptで制御したいと思っております。どうぞよろしくお願いいたします。

###該当のソースコード

<div class="area-text">
	<p class="model-number">XXXXXXXX<br>
	<span class="launch-date">XXXXXXXX</span></p>
</div>

</div> <div class="column"> <div class="area-image"> <img src="img/" alt=""> </div> <div class="area-text"> <p class="model-number">XXXXXXXX<br> <span class="launch-date">XXXXXXXX</span></p></div> </div> <div class="column"> <div class="area-image"> <img src="img/" alt=""> </div> <div class="area-text"> <p class="model-number">XXXXXXXX<br> <span class="launch-date">XXXXXXXX</span></p></div> </div> </div> ###条件１、テンプレートページとなるため、どのような画像のサイズが入ってくるかはわかりません。

２、場合によっては小さいサイズの画像は拡大表示させることも想定していますが、
縦横の比率は維持して表示させたいです

３、<div class="area-image">には
width: 210px; height: 130px;
と、最大のサイズは決まっております。

kei344

2016/07/13 13:08

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

dian_kat

2016/07/14 02:50

ご指導ありがとうございます。以後質問させていただく際に参考にさせていただきます。

kei344

2016/07/14 02:55

質問文は編集可能なので、よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryと書かれていないので、素のjavascriptで書きます。説明はコードの中に添えてあります。

javascript
1// 全部の画像が読み込み終わっているタイミングで
2window.onload = function() {
3    // rowクラスの中のimgタグを全て取る
4    var imageList = document.querySelectorAll(".row img");
5    
6    for(var i=0;i<imageList.length;i++) {
7        // imgタグを1つ取る
8        var image = imageList.item(i);
9
10        // 画像の幅と高さを比較する
11        if(image.width > image.height) {
12            img.className += " width_max";
13        }
14        else {
15            img.className += " height_max";
16        }
17    }
18};