HTMLで画像を縮小して表示したいのですが、縦横の比率を変えずに、横幅だけ(あるいは縦幅だけ)を指定して、拡大・縮小する方法はありますか?


元の画像のサイズよりも小さい枠(Table)の中に表示したいのですが、単純にwidthやheightだけ指定すると、縦横比が崩れてしまいます。
widthとheight両方指定するとなると、画像によってサイズを計らなきゃいけないので大変なんです。(微妙にサイズが違う画像が沢山あるので)

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/09/06 23:03:48
  • 終了:2006/09/11 17:19:08

回答(5件)

id:k6nch6n No.1

k6nch6n回答回数171ベストアンサー獲得回数112006/09/06 23:17:25

ポイント20pt

普通に問題なくできますよ。片方だけ指定すれば、縦横比はそのままで指定のサイズに拡大・縮小されます。お使いのHTMLエディタが勝手に指定しているということはありませんか?ソースを確認してみてください。本当に片方のみ指定されているのに駄目な場合、ブラウザの問題かもしれません。FirefoxとIEは問題ないはずです。

ダミーURL: http://q.hatena.ne.jp/1157551425

id:irhnhhtn

すいません、テスト的に簡単なHTMLを書いたところ、確かにできました・・。

ちなみにHTMLはテキストエディタで編集しているのでコードの自動生成はされません。

IE6.0です。

出来なかった方のHTMLは、画像をくくっているDIVやTABLEが、styleをCSSでposition:absoluteとかいろいろ指定しているので、それが影響しているかも知れません。

もう一度よく調べてみます。

2006/09/06 23:36:54
id:aiaina No.2

aiaina回答回数8179ベストアンサー獲得回数1312006/09/06 23:33:13

ポイント20pt

縦横の比率の固定にすれば出来ますよ

固定にすれば、片方だけ入力すれば拡大縮小できますhttp://q.hatena.ne.jp/1157551425

id:kabatotto34 No.3

kabatotto34回答回数25ベストアンサー獲得回数02006/09/06 23:35:36

ポイント20pt

どうしても片方のみの指定でうまくいかず、縦横を両方指定せざるを得ない場合、%表示を使うのはどうでしょう。

width="xx%" height="xx%"

%表示でよければ、単に両方の数値をそろえるだけで縦横比を維持できます。

ただし、厳密にピクセル数を指定したい場合のであれば使えません。

URLはダミーです

http://q.hatena.ne.jp/1157551425

id:irhnhhtn

ありがとうございます。

画像の縦横比率と異なるサイズのDIVもしくはTableの中にあるimageなんです。その為、縦と横の両方を%指定すると比率がくずれてしまうんです。

2006/09/06 23:41:28
id:llusall No.4

llusall回答回数505ベストアンサー獲得回数612006/09/06 23:44:34

ポイント20pt

IE限定であれば、

zoom というスタイルがあります。

%などで拡大率を指定できます。

http://www.htmq.com/style/zoom.shtml

id:bonlife No.5

回答回数421ベストアンサー獲得回数752006/09/07 00:33:01

ポイント20pt

以前、画面のサイズにおさまるように画像の表示サイズを変更するJavaScriptを書いたことがあります。

下記の例では、ブラウザのサイズを縮小した場合、それに合わせて画像も縮小表示するようにしています。

(今読み直すと変数名が適切でないものもありますが…。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ウィンドウサイズに合わせて画像サイズを変更</title>
<script type="text/javascript">
<!--
function imgResize(){
	resizeRate = 1.0; // 画面サイズに対する画像サイズの比率
	margin = 12; // 画像表示領域用の余白
	// 変数の定義
	imgWidth = document.getElementById('image1').width; // 画像の幅
	imgHeight = document.getElementById('image1').height; // 画像の高さ
	winWidth = Math.floor(document.body.clientWidth * resizeRate - margin * 2); // 画像表示領域の幅
	winHeight = Math.floor(document.body.clientHeight * resizeRate - margin * 2); // 画像表示領域の高さ
	widthRate = imgWidth / winWidth; // 画像サイズと画像表示領域のサイズの比率 (幅)
	heightRate = imgHeight / winHeight; // 画像サイズと画像表示領域のサイズの比率 (高さ)
	if (widthRate >= 1 && heightRate >= 1){
		// 画像のwidth、height共に画面に収まらない場合
		if (widthRate > heightRate){
			// 画像のwidthの比率の方が大きい場合
			// widthに合わせてリサイズ
			document.getElementById('image1').style.width = winWidth;
			document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
		} else {
			// 画像のheightの比率の方が大きい場合
			// heightに合わせてリサイズ
			document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
			document.getElementById('image1').style.height = winHeight;
		}
	} else if (widthRate >= 1 && heightRate < 1){
		// 画像のwidthのみ画面に収まらない場合
		document.getElementById('image1').style.width = winWidth;
		document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
	} else if (widthRate < 1 && heightRate >= 1){
		// 画像のheightのみ画面に収まらない場合
		document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
		document.getElementById('image1').style.height = winHeight;
	} else {
		// 画像のwidht、heightともに画面に収まる場合
                  // 必要であれば処理を記述
	}
}
window.onresize = imgResize;
//-->
</script>
<style type="text/css">
<!--
body {
	margin:10px;
	padding:0px;
}
-->
</style>
</head>
<body onLoad="imgResize()">
<img src="./XXXXXX.jpg" id="image1" onClick="window.open('./XXXXXX.jpg','imgOriginalSize')">
</body>
</html>

tableやdiv内に画像を表示、ということなので、上記の例では取得した画面サイズに合わせて処理している部分をtableのサイズに合わせてリサイズするように書き換えれば良いと思います。

例えば、cell1というidが付与されたtdタグにwidthが明示的に100と設定されている場合、「document.getElementById("cell1").width」で横幅を取得できます。

また、1ページに画像は1枚なのか、それとも複数なのか、によっても書き方が変わってくると思いますので、そのあたりを説明なさると後の回答者の方が適切な回答を付けやすいのではないでしょうか。

参考になれば幸いです。

id:irhnhhtn

ありがとうございます。

ロジックを組まないと、やはり無理なんですかね・・・。

その場合は、上記を参考にしたいと思います。

2006/09/11 17:18:17

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません