親の高さにあわせて画像の縦を100％にする方法

解決済

質問者：chikotto
質問日時：2009/06/19 18:06
回答数：5件

divやtdの中に配置した画像の高さを、それにわせて100％にしたいのです。
単純にheight="100%"でも当然100%にはなりませんので、CSSやJavaScriptが必要かと思いますが方法はありますか？
IE6～とFirefox2～の環境で実現できるのが条件です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： think49
回答日時：2009/06/21 17:39

> CSSやJavaScriptが必要かと思いますが方法はありますか？

JavaScriptを使用すれば「要素の高さを取得する」ことは出来ました。(IE7,Firefox3で確認)

--------
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-style-type' content='text/css' />
<meta http-equiv='content-script-type' content='text/javascript' />
<meta name='author' content='think' />
<title>js test</title>
<script type='text/javascript'>
(function(){
function init(){
var test = document.getElementById('test');
test.style.height = test.parentNode.offsetHeight + 'px';
}

if(typeof window.addEventListener == 'function'){
window.addEventListener('load', init, false);
} else if(typeof window.attachEvent == 'object'){
window.attachEvent('onload', init);
}
})();
</script>
</head>
<body>

<p style='background-color: #fee; height:1000px;'><img id='test' src='futaba001.png' />高さを変更したよ！</p>
<p style='background-color: #eef;' onclick="alert(this.offsetHeight);">高さを表示するよ！</p>

</body>
</html>
--------

CSSだけで要素の高さに合わせる場合は background-repeat で縦に並べるのが現実的だと思います。

- 0
- 件

通報する

この回答へのお礼

はい、CSSで縦に並べるのが理想的ですが、背景画像にできない理由がありまして…
とても参考になりそうです！
ありがとうございました！

通報する

お礼日時：2009/06/22 15:08

No.5

回答者： think49
回答日時：2009/06/21 17:48

あ、#3さんの回答を見て気が付きましたが、height:100% は通りますね。

質問者さんの質問を見て通らないものと思いこんでいました。

#4は複雑なので流してください。失礼しました。

- 0
- 件

通報する

No.3

回答者： taloo
回答日時：2009/06/20 08:30

height="100"は単位なしで記述し、ピクセル指定です。

スタイルシートで

<img style="height:100%;">

としてみるとどうでしょうか。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2009/06/19 21:49

それは基本的には無理です。

　なぜなら、利用者の画面でその親ブロックがどのサイズになるかは、サーバー側は無論、クライアント側(Java Scriptとか)でも取得できないからです。また、たとえ取得できたとしても、その後HTMLソースのその部分を書きなおすのは無理だからです。
　クライアント側がどの大きさのフォントを使って見ているかは知る由もない。結果的に外側のブロックの大きさもわからない。
　たとえば、今この入力画面ですら、文字が入力しづらければ、firefoxでしたら、Ctrl+＋で、文字サイズを大きくできますよ。もちろん、ResizableTextareaという拡張をインストールしていれば、(テキストエリアの大きさも可変）
　そもそも、どういう画像を表示したいのでしょう。そのブロックの背景に画像をおくのなら、画像の一部が表示されますがそのブロック一杯に画像表示できます。
div.imageBlock{background-image:url;}

- 0
- 件

通報する

この回答へのお礼

基本的には無理ですよね。それでもなにか方法があればと…
ありがとうございます！！

通報する

お礼日時：2009/06/22 15:07

No.1

回答者： ORUKA1951
回答日時：2009/06/19 19:34

肝心なことが判りません。

ご自身では判っていらっしゃるのでしょうが・・
>divやtdの中に配置した画像の高さを、それにわせて100％にしたいのです。
　　　　　　　　　　　　　　　　　　^^^^^
の「それ」ってなんですか？

>単純にheight="100%"でも当然100%にはなりませんので
・・heightは、その親要素に対するもので、内容に対するものではありません。
　もしそれが親要素の高さに合わせてなら、親要素の高さを決めてから、サーバーのImageMagick等のプログラムで画像処理をしてください。
例> convert -sample 80x40 input.jpg output.jpg

　それが画像の高さに合わせるなら、画像のサイズに合わせてそととにて、
div.imageBox{height:240px;}とすりゃすむ。

この回答への補足

言葉足らずで申し訳ありません。
画像を包み込んでいるtdやdivの高さにあわせて、画像の高さあわせて表示させたいのです。それが画像の実サイズではなくても。
tdやdivの高さは固定はできず、中に入るテキスト等の量により変動します。

画像の高さにtdやdivをあわせるのではなく、tdやdivの高さに画像をあわせたいのです。

補足日時：2009/06/19 20:58

通報する