スマフォサイト制作での画像幅の拡大縮小について

質問

２枚の画像バナーを横に並べたいのですが、
端末画面の横幅を想定して画像を作成してしまうと、
横に回転して閲覧した際小さく表示されてしまいます。
これを拡大させて表示させたいです。

文章が分かりづらいので画像を添付しました。
あくまで例なのですが、
480×854のスマフォ端末を想定した場合、
画像バナー（各リンク設定あり）を225pxの横幅で表示し、
バナーの上下左右に10pxの余白を残したい時。

これを横回転した際（854×480）、
横幅225pxで固定して作成しまうと、
バナーが小さく表示されてしまいます。
これを、横回転した時にも拡大されるようにしたいのです。
端末によっては480px以上に横幅の広い画面もあるかと思うので…
縦幅がその分広がっても構いません。

横１枚画像を置きたいのであれば、
width:100%;で対応可能かと思うのですが、
画像バナーそれぞれにリンクを設置したいので
別箇要素を設けたいです。

考え方としては、paddingの幅を固定にして、
画像を端末によってブロック要素の横幅100％まで拡大できるように
できれば理想なのですが…

スマートフォンサイト制作で詳しい方、
何か策がございましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。

回答No.2

ORUKA1951

＞margin:1%とwidth:48%とposition:relativeで余白を作っているかと
思うのですが、

　CSSはXSLTと異なり、計算ができません。そのため(width)×0.02÷2なんて不可能
　paddingを使わないのは、ボックスの幅がpadding辺の内側だからです。

　たとえば、800px内に、width=100%幅を入れようとするとpadding:10px;とすると、実際には右側に20px+border幅×4ほどはみ出てしまいます。
→Box model ( http://www.w3.org/TR/CSS2/box.html )

　そのため、ブロック単位で配置をするときはpadding:0にしておいて、内包されるブロックのマージンで余白を指定するほうが良いです。

回答No.1

ORUKA1951

<ul id="banners">
＿<li><a href="./a"><img src="./images/A.gif" width="225" height="80" alt="Ａへ"></a></li>
＿<li><a href="./b"><img src="./images/B.gif" width="225" height="80" alt="Ｂへ"></a></li>
＿<li><a href="./c"><img src="./images/C.gif" width="225" height="80" alt="Ｃへ"></a></li>
＿<li><a href="./d"><img src="./images/d.gif" width="225" height="80" alt="Ｄへ"></a></li>
</ul>
の場合
html,body{margin:0;padding:0;width:100%;}
#banners,#banners li,#banners li img{display:block;list-style:none;margin:0;padding:0;}
#banners li{width:auo;margin:1%;float:left;width:48%;position:relative;}
#banners li img{display:block;width:100%;height:auto;}
だけでよいはずです。

HTMLはデザインとは無関係に文書構造だけ記述すること。先でどのようにも変更できます。
パソコンでは右側に縦に並べるとか、ページの最下段に置こうとか・・・。

補足

早速のご回答ありがとうございます！
お教えいただいた文章で反映させてみたところ、
希望に近いレイアウトになりました！感謝感激ですm(_ _)m

１つ、今後のためにお教えいただきたいのですが
（無知で申し訳ありません…）

#banners liでpadding幅を指定せず、
margin:1%とwidth:48%とposition:relativeで余白を作っているかと
思うのですが、この方法だと、大きい画面の端末だと
若干右寄りに配置されてしまいます。
この数値の算出は、何か根拠があってのものなのでしょうか…？

ご面倒おかけいたしますが、ご教授いただけましたら幸いです…！