テーブル内の画像の高さ調整について

テーブル内の画像の高さ調整が効きません
テーブルの高さを100%（画面いっぱい)にし、
そのうち30%に画像というテーブルを組んでるのですが、
<img src="" width="100%" height="100%">を指定してるにも関わらず、高さの%での調整できません
親要素にheightを設定してるのなぜでしょうか？
%の指定はできないのでしょうか？


<style>
body,html{
height:100%;
}
</style>

<table border=1 width="100%" height="100%">
<tr>
<td width="100%" height="30%">
<img src="画像ファイル" width="100%" height="100%">
</td>
<tr>
<td width="100%" height="70%">
</td>
</table>

No.1 回答者： fujillin 回答日時： 2018/04/03 12:46

こんにちは

詳しいことは存じませんが・・・

試しに画像を外してみると、（多分）意図なさっていた表示になるものと想像します。

動きを見ていると、セルの内容のサイズを求める際に、画像要素の属性height＝100％によって画像は元のサイズとして計算されているように思われます。
多分、（↓）この辺りが原因なのではないでしょうか。
https://developer.mozilla.org/ja/docs/Web/CSS/Re …

table-layout:fixed;やobject-fit なども試してみましたが、うまくいかないようです。
ちなみに、画像要素のwidth、height属性は、HTML5ではピクセル値の指定だけが正しいようです。
https://developer.mozilla.org/ja/docs/Web/HTML/E …


以下は正しい方法かどうかはわかりませんが、画像にラッパーを設け、画像自体はpoition:abusolute;にしてしまうことで、質問者様が意図しているレイアウトに（多分）近くなるのではないかと思います。

＜CSS＞
body, html { height:100%; }
table { width:100%; height:100%; }
tr:first-child { height:30%; }
tr:nth-child(2) { height:70%; }
div { height:100%; position:relative; }
img { position:absolute; width:100%; height:100%; }

＜HTML>
<table border=1>
<tr><td>
<div><img src="A.jpg" /></div>
</td></tr>
<tr><td>
</td></tr>
</table>