画像の大きさが変わってしまいます

2012/05/21 16:55

このQ&Aのポイント

画像の拡大領域と小さな画像の表示方法について質問があります。
拡大領域には一つ目の画像を正しく表示できるが、2個目以降は大きく表示されてしまう問題があります。
画像の元々のサイズがばらばらなために、大きさが変わってしまう現象を防ぐ方法はあるのでしょうか？

画像の大きさが変わってしまいます；；

<table border="0"> <tr> <td colspan="5"> <%= image_tag '0.jpg', :id => 'myPhoto', :class =>'photoSize' %> </td> </tr> <tr> <td> <%= image_tag '00.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '01.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '02.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '03.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '04.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> </tr> <tr> <td> <%= image_tag '05.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '06.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '07.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '08.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> <td> <%= image_tag '09.jpg', :class => 'thumbnail', :onclick => "selectPhoto(this);" %> </td> </tr> </table> このように、拡大領域があって、その下に小さな画像が１０個ある形です。小さな画像をクリックすると拡大領域に表示するという形を作りたいのです。しかし、クリックをすると一つ目はしっかり、もともとある拡大領域に表示されるのですが、２個目をクリックするともっと大きく表示されてしまいます。画像１つ１つの元々のサイズがばらばらなのが原因だと思うのですが、ばらばらだった場合にも大きさが勝手に変更されないようにすることは可能でしょうか・・・？

rankatyan4
お礼率50% (11/22)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/21 19:40 回答No.1

なにかのプログラム(javascrptｓｔ)内の書き方ですか？ここは、「Webデザイン・CSS」ですので、ちょっとカテゴリーが違うので、HTML+CSSとして回答しておきます。「拡大領域があって、その下に小さな画像が１０個ある形です。」との事ですので、多分HTMLを率直に記述すると <ol id="album"> 　<li><img src="images/thumbnail/01.jpg" width="80" height="60" alt="なんとかの縮小写真"> 　　　<p><img src="images/photo01.jpg" width="640" height="480" alt="なんとか"></p> 　</li> 　<li><img src="images/01.jpg" width="80" height="60" alt="なんとかの縮小写真"> 　　　<p><img src="images/photo/02.jpg" width="640" height="480" alt="なんとか"></p> 　</li> ・・・ </ol> 　とかのはずですね。・・・そんな難しいものではないので、率直に文書構造どおりマークアップしておきます。スタイルシートで #album,#album li{display:block;list0style:none;margin:0;padding:0;} #album{width:800px;height:600px;margin:0 auto;border:1 gray solid;text-align:center;position:relative;} #album li{width:100px;float:left;} とか・・・ HTMLはデザインは一切考えすに書くこと!!! [全体]とっても簡単な例ですが・・こんなに簡単なものかと思うけど・・・画像の縦横比やサイズが異なっていても中央に表示される。・縦長ではみ出る場合はスクロールが現れる。・スタイルシートを解釈しないブラウザや印刷のため、thumbnail画像、拡大画像とも任意のサイズで記載しておく。　　印刷を想定するなら実幅1028pxをwidth="540"とかにすると良い(きれいに印刷できる) ・javascriptを使わず、HTML+CSSのみで作成してある。　javascript無効のブラウザでも利用できる。　印刷時は一覧として表示される。印刷プレビューで確認 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　ウェブ標準(HTML4.01strict+CSS2.1)です。 ※タブは、＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<h1>サンプル</h1> <ol id="album"> ＿<li><img src="images/thumbnail/01.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/01.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/01.jpg" width="54" height="72" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/02.jpg" width="540" height="720" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/03.jpg" width="80" height="80" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/03.jpg" width="800" height="800" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/04.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/04.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/05.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/05.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/06.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/06.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/07.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/07.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/08.jpg" width="72" height="54" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/08.jpg" width="640" height="480" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/09.jpg" width="80" height="" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/09.jpg" width="800" height="800" alt="なんとか"></p> ＿</li> ＿<li><img src="images/thumbnail/10.jpg" width="54" height="72" alt="なんとかの縮小写真"> ＿＿<p><img src="images/photo/10.jpg" width="540" height="720" alt="なんとか"></p> ＿</li> </ol> </body> </html>

質問者