このテーブルには2列と5行があります。各セルに画像を配置し、その画像がtd
の寸法に合うようにする必要があります。
これが私のHTMLとCSSコードです。
#menu{
float:right;
width:200px;
height:650px;
border-bottom:none;
border-left:solid 1px;
}
#menu img{
width:100%; height:auto;;
}
td{
border:solid 1px;
}
<table id="menu" cellspacing="0">
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
</table>
私が得たのはこれです:
画像がすべてのセルに収まるわけではありません。
これらの画像のサイズを変更するにはどうすればよいですか? IE9で動作する提案が必要です。
画像の幅を100%にし、高さを自動にして、画像が歪んで見えるのを防ぎます
のようなもの
#menu img{
display:block; width:100%; height:auto;
}
正確に合わせるには、width:100%
とheight:100%
を使用します。
プロパティmax-width
およびmax-height
は、要素の寸法セットではなく、制限寸法です。