人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: irhnhhtn
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML サイズ 微妙 画像
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● k6nch6n
●20ポイント

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

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

◎質問者からの返答

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

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

IE6.0です。

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

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


2 ● aiaina
●20ポイント

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

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


3 ● kabatotto34
●20ポイント

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

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

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

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

URLはダミーです

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

◎質問者からの返答

ありがとうございます。

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


4 ● llusall
●20ポイント

IE限定であれば、

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

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

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


5 ●
●20ポイント

以前、画面のサイズにおさまるように画像の表示サイズを変更する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枚なのか、それとも複数なのか、によっても書き方が変わってくると思いますので、そのあたりを説明なさると後の回答者の方が適切な回答を付けやすいのではないでしょうか。

参考になれば幸いです。

◎質問者からの返答

ありがとうございます。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ