スマフォサイトの横並び画像について

質問

こんにちは。

スマフォサイトの制作でつまづいているので
質問させて頂きます。

横並びの画像（画像メニュー）を親ブロック要素100%の中に並べて表示させたいと思っています。

下記コードで画像を一列に表示させていて、
<li>要素の中の画像が同じ横幅サイズの場合、
幅○○％等で指定するとうまくいくと思うのですが、
各画像の幅が異なる場合に、画面に合わせて拡大縮小させることはできないでしょうか。

<ul>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
～省略
</ul>

@media screen and (max-width: 480px)
などでCSSを指定する方法もあると思うのですが、
他にオーソドックスな方法などがあれば
ご教授頂けないでしょうか？

どうか宜しく宜しくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

IMG要素は、行内要素です。
→ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
　さらに置換要素と言って置き換えられる画像のサイズによって伸縮します。
→置換インライン要素の場合（Inline, replaced elements）
→Intrinsic dimensions - 内在寸法 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/conform.html#intrinsic )

　よってスタイルシートでサイズを指定すると、画像のサイズになってしまいます。

　そこで、画像要素(デフォルトはdisplay:inline)を、displayにてblock要素などに変更すればよいと言うことですね。

<ul>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
<li><a href="#"><img src="../images/gazo1.png"></a></li>
～省略
</ul>
の場合、
ul,ul li{display:block;position:relative;}
ul{width:80%;margin:0 auto;}
ul li{width:30%;height:auto;background-color:yellow;}
ul li+li{width:40%;margin-left:1%;}
ul li+li+li{width:28%;}
とかで、親コンテナブロックのそれぞれ30%,40%,28%になります。余白は二つ目のli以降は１％あきます。

　それじゃまずいのですか？

補足

ご回答ありがとうございます！

お教え頂いた方法をヒントに
以下のようにやってみて、なんとか問題なく表示することができました。
画像メニューがぴったりと横並びに表示されている感じです。

やはり、パーセンテージで指定するしかないのでしょうか。

小数点まで指定しないと縦幅がずれてしまいます。。

あまりいい方法ではなさそうなので
他に方法があればお教え頂けたら幸いです。

どうもありがとうございました！！

.navi {
text-align: center;
overflow: hidden;
padding: 5px 6px 10px;
}

.navi ul {
margin:0 auto;
width: 100%;
text-align: center;

}

.navi li {
margin: 0px;
padding: 0px;
display: block;
float: left;
}

.navi ul li{width:23.6%;}
.navi ul li+li{width:19.5%;}
.navi ul li+li+li{width:21.4%;}
.navi ul li+li+li+li{width:18.9%;}
.navi ul li+li+li+li+li{width:16.8%;}