こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

投稿日時 - 2006-07-09 13:27:31

QNo.2264973

すぐに回答ほしいです

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

<!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>

投稿日時 - 2006-07-09 14:36:20

お礼

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

投稿日時 - 2006-07-09 15:30:04

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

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

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


<IMG src="20060628_001.jpg">


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

投稿日時 - 2006-07-09 14:37:42

お礼

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

投稿日時 - 2006-07-09 15:27:49

ANo.2

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

投稿日時 - 2006-07-09 13:52:40

お礼

>src="20060628_001.jpgの後ろに;"が抜けています。

失礼しました。。。

スタイルシートは今はhtmlの中に埋め込んでいるのですが将来的に外部に持たせようと考えています。

この方法で試してみます。

投稿日時 - 2006-07-09 14:04:23

ANo.1

「提出」ということで、学校の課題の可能性があり、ヒントのみにとどめたいと思います。

width:400px;height:300px

ここの部分がツボです。

また、横の写真のサイズも確認しましたか?
微妙につぶれてはいませんか?

投稿日時 - 2006-07-09 13:46:05

お礼

ありがとうございます。
縦のサイズは

width:300px;height:400px

と指定すればちゃんと行きますが今度は横の写真がつぶれてしまいます。

横の写真のサイズは「width:400px;height:300px」にあわせて縮小したので大丈夫な感じです。

投稿日時 - 2006-07-09 13:59:46

あなたにオススメの質問