- ベストアンサー
ホームページで縦と横の写真を載せる。
今写真を表示させるときに <IMG style="width:400px;height:300px;src="20060628_001.jpg"> という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。 考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦 横 写真 html」とか「縦 横 写真 ホームページ」とかで検索しても見つかりませんでした。 なのでこちらでお力を貸していただきたく質問をさせていただきました。 どうかよろしくお願いします。 明日までに提出しないといけないので「３．直ぐに～」を選択させていただきました。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>画像を比率を保ったまま指定サイズ内に表示</title> <script type="text/javascript"><!-- function resize(img){ var w = 400;//表示したい横サイズ var h = 300;//表示したい縦サイズ var rate = img.width/img.height;//表示する画像の横縦比 if(img.width>img.height){//横に長い画像 if(w/rate>h){//横にサイズを合わせると縦がはみ出る w=h*rate;//縦サイズに合わせた横サイズにする } else { h=w/rate;//横サイズに合わせた縦サイズ } } else { if(h*rate>w){ h=w/rate; } else { w=h*rate; } } img.width=w; img.height=h; } //--> </script> </head> <body> <!-- 外側の枠は目安のための仮の表示 --> <div style="width:400px;height:300px;border: black solid 1px"> <img src="20060628_001.jpg" onload="resize(this)"> </div> </body> </html>
その他の回答 (3)
- chirashizushi
- ベストアンサー率22% (571/2533)
写真の大きさと違うサイズをタグで指定するので縦横比がおかしくなって、潰れてしまうのです。 <IMG style="width:400px;height:300px;src="20060628_001.jpg"> <IMG src="20060628_001.jpg"> 縦横のサイズを指定せずに予め大きさを整えた写真を用意するのであれば、ファイル名だけを指定するのも有りですよ(^_^)v
お礼
ありがとうございます。 知りませんでした・・・ もとが大きい画像を使用していたためhtmlの中でサイズを指定する形をとってたんですがそれでは容量がもったいないですよね(´Д｀；) 勉強のため縦と横でサイズを指定するやり方もちゃんと最後までやってみます。
- suzuko
- ベストアンサー率38% (1112/2922)
外部スタイルシートではなく、一つ一つスタイルを指定されているのでしょうか？ それともHeadに指定されているのでしょうか？ もしHeadなら縦タイプと横タイプに表示サイズを変更し、id指定で良いのではないでしょうか？ ****Head****** .tate {width:300px;height:400px;} .yoko {width:400px;height:300px;} *****body***** <img id="tate" style="src="20060628_001.jpg"> 蛇足：<IMG style="width:400px;height:300px;src="20060628_001.jpg"> の場合、src="20060628_001.jpgの後ろに;"が抜けています。
お礼
＞src="20060628_001.jpgの後ろに;"が抜けています。 失礼しました。。。 スタイルシートは今はhtmlの中に埋め込んでいるのですが将来的に外部に持たせようと考えています。 この方法で試してみます。
- bari_saku
- ベストアンサー率17% (1827/10268)
「提出」ということで、学校の課題の可能性があり、ヒントのみにとどめたいと思います。 width:400px;height:300px ここの部分がツボです。 また、横の写真のサイズも確認しましたか？ 微妙につぶれてはいませんか？
お礼
ありがとうございます。 縦のサイズは width:300px;height:400px と指定すればちゃんと行きますが今度は横の写真がつぶれてしまいます。 横の写真のサイズは「width:400px;height:300px」にあわせて縮小したので大丈夫な感じです。
お礼
目からウロコです。 サイズの比なんて考えてもみませんでした。 「onload」で写真表示時のサイズの指定できるんですね。 参考にさせていただきます。