画像とは関係ないんですけどね。
サイトのイラストコンテンツの作成で現在画像をインラインフレームの中に入れているんですが、
このインラインフレーム領域以上の画像が表示されたときに、表示領域内で画像サイズを調整したかったわけですよ。
で、CSSでは対応できないっぽいのでJavaScriptを利用したわけです。
思いついた案が以下のとおり。
① 子ページから、親インラインフレームのサイズを取得。
② 画像サイズ > フレームサイズなら、画像サイズをフレームサイズに合わせる。
③ 画像サイズは、元サイズの比率を保持する。
こんな感じで実装したかったんですよ。
そしていつも通り「インラインフレーム 高さ取得」とかでググってみるんですが、
「インラインフレーム内のコンテンツサイズを元に、インラインフレームのサイズを調整する」
がたくさん出てきて
「インラインフレームのサイズに合わせて、コンテンツサイズを調整する」
が全く出てこなかったわけで。
結局悩んで記事は見つかったんですが、こういうこと考える人は少ないってことなのか、自分の調べ方が悪かったのか。
ちなみに、実装した処理は次のようなもの(インラインフレーム内に表示するHTMLに記述)
「画像のサイズを比率を固定したまま変更する」はあったんですけどね・・・・。
なんだかなあ。
サイトのイラストコンテンツの作成で現在画像をインラインフレームの中に入れているんですが、
このインラインフレーム領域以上の画像が表示されたときに、表示領域内で画像サイズを調整したかったわけですよ。
で、CSSでは対応できないっぽいのでJavaScriptを利用したわけです。
思いついた案が以下のとおり。
① 子ページから、親インラインフレームのサイズを取得。
② 画像サイズ > フレームサイズなら、画像サイズをフレームサイズに合わせる。
③ 画像サイズは、元サイズの比率を保持する。
こんな感じで実装したかったんですよ。
そしていつも通り「インラインフレーム 高さ取得」とかでググってみるんですが、
「インラインフレーム内のコンテンツサイズを元に、インラインフレームのサイズを調整する」
がたくさん出てきて
「インラインフレームのサイズに合わせて、コンテンツサイズを調整する」
が全く出てこなかったわけで。
結局悩んで記事は見つかったんですが、こういうこと考える人は少ないってことなのか、自分の調べ方が悪かったのか。
ちなみに、実装した処理は次のようなもの(インラインフレーム内に表示するHTMLに記述)
parent.document.getElementById("hoge").clientWidth;この2つで親ページのインラインフレームサイズを取得できました。
parent.document.getElementById("hoge").clientHeight;
「画像のサイズを比率を固定したまま変更する」はあったんですけどね・・・・。
なんだかなあ。
コメント
コメントを投稿