元の画像のサイズよりも小さい枠（Table）の中に表示したいのですが、単純にwidthやheightだけ指定すると、縦横比が崩れてしまいます。
widthとheight両方指定するとなると、画像によってサイズを計らなきゃいけないので大変なんです。（微妙にサイズが違う画像が沢山あるので）
No.1
171
11
20pt
普通に問題なくできますよ。片方だけ指定すれば、縦横比はそのままで指定のサイズに拡大・縮小されます。お使いのHTMLエディタが勝手に指定しているということはありませんか？ソースを確認してみてください。本当に片方のみ指定されているのに駄目な場合、ブラウザの問題かもしれません。FirefoxとIEは問題ないはずです。
ダミーURL: http://q.hatena.ne.jp/1157551425
No.3
250
20pt
どうしても片方のみの指定でうまくいかず、縦横を両方指定せざるを得ない場合、％表示を使うのはどうでしょう。
width="xx%" height="xx%"
％表示でよければ、単に両方の数値をそろえるだけで縦横比を維持できます。
ただし、厳密にピクセル数を指定したい場合のであれば使えません。
ＵＲＬはダミーです
ありがとうございます。
画像の縦横比率と異なるサイズのDIVもしくはTableの中にあるimageなんです。その為、縦と横の両方を％指定すると比率がくずれてしまうんです。
No.5
42175
20pt
以前、画面のサイズにおさまるように画像の表示サイズを変更するJavaScriptを書いたことがあります。
下記の例では、ブラウザのサイズを縮小した場合、それに合わせて画像も縮小表示するようにしています。
(今読み直すと変数名が適切でないものもありますが…。)
58
52
<!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枚なのか、それとも複数なのか、によっても書き方が変わってくると思いますので、そのあたりを説明なさると後の回答者の方が適切な回答を付けやすいのではないでしょうか。
参考になれば幸いです。
ありがとうございます。
ロジックを組まないと、やはり無理なんですかね・・・。
その場合は、上記を参考にしたいと思います。
1
1
すいません、テスト的に簡単なＨＴＭＬを書いたところ、確かにできました・・。
ちなみにＨＴＭＬはテキストエディタで編集しているのでコードの自動生成はされません。
IE6.0です。
出来なかった方のＨＴＭＬは、画像をくくっているDIVやTABLEが、styleをCSSでposition:absoluteとかいろいろ指定しているので、それが影響しているかも知れません。
もう一度よく調べてみます。