もどかしい

画像とは関係ないんですけどね。

サイトのイラストコンテンツの作成で現在画像をインラインフレームの中に入れているんですが、
このインラインフレーム領域以上の画像が表示されたときに、表示領域内で画像サイズを調整したかったわけですよ。

で、CSSでは対応できないっぽいのでJavaScriptを利用したわけです。

思いついた案が以下のとおり。
 ① 子ページから、親インラインフレームのサイズを取得。
② 画像サイズ > フレームサイズなら、画像サイズをフレームサイズに合わせる。
③ 画像サイズは、元サイズの比率を保持する。

こんな感じで実装したかったんですよ。
そしていつも通り「インラインフレーム 高さ取得」とかでググってみるんですが、

「インラインフレーム内のコンテンツサイズを元に、インラインフレームのサイズを調整する」
がたくさん出てきて
「インラインフレームのサイズに合わせて、コンテンツサイズを調整する」
が全く出てこなかったわけで。

結局悩んで記事は見つかったんですが、こういうこと考える人は少ないってことなのか、自分の調べ方が悪かったのか。

ちなみに、実装した処理は次のようなもの(インラインフレーム内に表示するHTMLに記述)
parent.document.getElementById("hoge").clientWidth;
parent.document.getElementById("hoge").clientHeight;
この2つで親ページのインラインフレームサイズを取得できました。

「画像のサイズを比率を固定したまま変更する」はあったんですけどね・・・・。
なんだかなあ。

コメント