ホームページで縦と横の写真を載せる。

解決済

質問者：yamagu219
質問日時：2006/07/09 13:27
回答数：4件

今写真を表示させるときに

<IMG style="width:400px;height:300px;src="20060628_001.jpg">

という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。
考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦　横　写真　html」とか「縦　横　写真　ホームページ」とかで検索しても見つかりませんでした。

なのでこちらでお力を貸していただきたく質問をさせていただきました。
どうかよろしくお願いします。

明日までに提出しないといけないので「３．直ぐに～」を選択させていただきました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2006/07/09 14:36

<!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">
</script>
</head>
<body>

<div style="width:400px;height:300px;border: black solid 1px">
<img src="20060628_001.jpg" onload="resize(this)">
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

目からウロコです。
サイズの比なんて考えてもみませんでした。
「onload」で写真表示時のサイズの指定できるんですね。
参考にさせていただきます。

通報する

お礼日時：2006/07/09 15:30

No.4

回答者： chirashizushi
回答日時：2006/07/09 14:37

写真の大きさと違うサイズをタグで指定するので縦横比がおかしくなって、潰れてしまうのです。

<IMG style="width:400px;height:300px;src="20060628_001.jpg">

<IMG src="20060628_001.jpg">

縦横のサイズを指定せずに予め大きさを整えた写真を用意するのであれば、ファイル名だけを指定するのも有りですよ(^_^)v

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
知りませんでした・・・
もとが大きい画像を使用していたためhtmlの中でサイズを指定する形をとってたんですがそれでは容量がもったいないですよね(´Д｀；)
勉強のため縦と横でサイズを指定するやり方もちゃんと最後までやってみます。

通報する

お礼日時：2006/07/09 15:27

No.2

回答者： suzuko
回答日時：2006/07/09 13:52

外部スタイルシートではなく、一つ一つスタイルを指定されているのでしょうか？　それとも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の後ろに;"が抜けています。