HTML で

<img src="~~" width="300"
と書けばどんなサイズの画像でも横幅を300pxに抑えることが出来ますよね?

どんなサイズの画像だとしても横幅300px以内,縦300px以内の大きさに抑えて表示させたいのですが、可能でしょうか??

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2006/12/08 16:45:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答8件)

id:AMERICAN No.1

回答回数22ベストアンサー獲得回数0

ポイント18pt

画像の形式のよって、見れないパソコンもあるかもしれませんが、

ほぼ見る事が出来ますよ!

ただ、大きさではなくファイルのサイズ(メガバイトなど…)が大き過ぎるものは、表示に時間がかかったり見れない場合もあります。

タグ

 <Img Src="???" Width="300" Height="300">

<>は<>に換えて使ってください。

http://heo.jp/tag/href/imgsrc.html

id:yamazakiis

元画像の縦横比を保ちたいんですよねぇ。

2006/12/01 16:49:51
id:toku4sr4agent No.2

回答回数349ベストアンサー獲得回数28

ポイント17pt

可能だと思います。

ただし、

<img src="hatena.jpg" width="300" height="300">

と指定した場合、

仮に元の画像の縦横比が1:1ではない場合、ゆがんで見えてしまいます。

ですので、なるべく元の画像の縦横比とあうように縮小されたらよいと思います。


例えば元の画像:600×400なら

width="300" height="200"

という感じです。

ただ、web上にアップロードした画像を表示させるのでしょうから、

ある程度、画像ソフトなどで縮小してから使用されたほうが無難かもしれません。

id:yamazakiis

どんな画像だとしても(元の画像サイズが分からなくても)出来るようにしたいのです

2006/12/01 17:38:34
id:toku4sr4agent No.3

回答回数349ベストアンサー獲得回数28

ポイント17pt

ちなみに、

画像が大きすぎて困る場合の方法です。


はてなではありませんが、

http://okwave.jp/qa1863396.html

にヒントがあります。


>このソフトで「変形」→「伸縮と傾き」と選択していくと、

>写真そのものの大きさを小さくすることは可能です。


ここで「水平方向」「垂直方向」のいずれも、同じパーセンテージ(例えば両方とも50%に指定)

とすれば縦横比は保たれます。


参考までに、

http://d.hatena.ne.jp/toku4sr4agent/20061130

に掲載している写真は、(元の写真は1600×1200ですが)

上記のような方法でリサイズしたものです。

id:yamazakiis

ソフトで操作ではなく、どんな画像だとしてもHTMLで解決したいのです。

2006/12/01 17:38:36
id:wizemperor No.4

回答回数379ベストアンサー獲得回数52

ポイント17pt

>どんなサイズの画像だとしても横幅300px以内,縦300px以内の大きさに抑えて表示させたいのですが、可能でしょうか??

可能です。

toku4sr4agentさんの回答と同様です。

>HTML で

>どんな画像だとしても(元の画像サイズが分からなくても)出来るようにしたいのです

>ソフトで操作ではなく、どんな画像だとしてもHTMLで解決したいのです。

これは不可能です。

あらかじめサイズを調整しておくのが無難だと思います。

PHPやJavaScript(JS)を使用して良い条件ならば、動的に処理することによって可能です。

少し古いですが、「仕組み」はわかりやすい一例です。

http://bbs.sekkaku.net/faq/121.html

JSならば、同様に、

・JSで画像の幅と高さ(imgのwidth/heightにはオリジナルのサイズを指定しておく)を取得

・幅か高さが300pxを越えていたら大きい方を300pxに縮小

・縮小率(300px÷オリジナルサイズ)に合わせてもう一方も縮小

・imgのwidth/heightを書き換える

という手順で可能です。

id:kn1967 No.5

回答回数2915ベストアンサー獲得回数301

ポイント17pt

HTMLだけであれば、

(1)横長の画像

<img id="pic1" src="ファイル名" width="300" height="auto">

(2)縦長の画像

<img id="pic1" src="ファイル名" width="auto" height="300">

のいずれかしかできないです。


縦長なのか横長なのかが事前に判らない場合は、

(1)JAVAScriptなどを使ってクライアント側で動的に変更

(2)CGIによってサーバー側で画像を加工

といったような手段が必要になってきますが、環境に依存するだけでなく、負荷も大きいので、実際にはどちらも使わずに事前にサイズ調整するものですけど、、、、

id:Mars No.6

回答回数203ベストアンサー獲得回数20

ポイント17pt

img タグでは width , height を指定しない。

スタイルで max-width,max-height を指定する。

img {

max-width:100px;

max-height:100px;

}

max-width/height は IE7 から対応ですのでもうちょっと/しばらく待ったほうがいいかもしれませんが。(gecko系やoperaは対応済み)

id:Mars No.7

回答回数203ベストアンサー獲得回数20

ポイント17pt

追記。

max-width,max-heightは

IE7 で、かつ、標準モードでレンダリングされる場合だけで有効になるようです。(互換モードでは無視される。)

id:kurukuru-neko No.8

回答回数1844ベストアンサー獲得回数155

ポイント10pt

HTMLのみでは無理と思います。

HTML+JavaScriptであれば計算すれば可能。

一部、全角<に置き換えています。

猫の気にしないでください。

例: JavaScriptの例(いいかげんです)

IE/OPERAでは動作しました。

ファイル test.html

<HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">

</head>

<BODY>

300x300 縦横比 補正無し

<img SRC="http://m-hiji.hp.infoseek.co.jp/photo2/2689.jpg" width=300 height=300>

<hr>

300x300 縦横比 補正あり JavaScript Type 1

<IFRAME SRC="test2.html?img=http://m-hiji.hp.infoseek.co.jp/photo2/2689.jpg" hspace=0 vspace=0 marginheight=0 marginwidth=0 scrolling=no framespacing=0 width=300 height=300 frameborder=0>

</IFRAME>

<hr>

300x300 縦横比 補正あり JavaScript Type 2

<IFRAME SRC="test3.html?img=http://m-hiji.hp.infoseek.co.jp/photo2/2689.jpg" hspace=0 vspace=0 marginheight=0 marginwidth=0 scrolling=no framespacing=0 width=300 height=300 frameborder=0>

</IFRAME>

<hr>

</BODY>

</HTML>

ファイル test2.html

<HTML>

<SCRIPT type="text/javascript">

var imgTimer;

var imgLoadCount = 0;

var imgLoadExpire = 100;

var imgobject = null;

function OnLoad(){

imagename = GetParam("img");

if( imagename ) {

imgobject=new Image();

imgobject.src=imagename;

imgLoadCount = 0;

clearInterval(imgTimer);

imgTimer = setInterval("LoadImage()", 25);

document.write('<body>');

document.write('<img id="image1" alt="Loading">');

document.write('</body>');

};

}

function GetWidth(){

if(document.all){

return(document.body.clientWidth);

}else if(document.layers){

return(innerWidth);

}else{

return(-1);

};

}

function GetHeight(){

if(document.all){

return(document.body.clientHeight);

}else if(document.layers){

return(innerHeight);

}else{

return(-1);

};

}

function GetParam(name)

{

var KeyWord = "&" + name + "=";

var UrlStr = document.location.href;

var Parm = UrlStr.indexOf("?") ;

if( Parm == -1 ) {

return null;

};

UrlStr = "&" + UrlStr.substring(Parm+1) + "&";

var iFind = UrlStr.indexOf(KeyWord);

if (iFind == -1){

return null;

};

var retval = null;

var iStart = iFind + KeyWord.length;

var iEnd = UrlStr.indexOf("&" , iStart);

retval = UrlStr.substring(iStart,iEnd);

retval = unescape(retval);

return retval;

}

function LoadImage()

{

if(imgobject.complete) {

aspect1 = imgobject.width / imgobject.height;

aspect2 = GetWidth()/ GetHeight();

divx=1; divy=1;

if( aspect1 >= aspect2 ) {

divy=aspect1;

} else {

divx=aspect1;

};

document.all.image1.src=imgobject.src;

document.all.image1.width=GetWidth() * divx;

document.all.image1.height=GetHeight() / divy;

clearInterval(imgTimer);

} else {

imgLoadCount++;

if (imgLoadCount > imgLoadExpire ) {

clearInterval(imgTimer);

};

};

}

OnLoad();

</SCRIPT>

</HTML>

ファイル test3.html

<HTML>

<SCRIPT type="text/javascript">

function OnLoad(){

imagename = GetParam("img");

if( imagename ) {

document.write('<body>');

document.write('<img id="image1" onload="ResizeImage();" alt Loading src="'+imagename+'">');

document.write('</body>');

};

}

function GetWidth(){

if(document.all){

return(document.body.clientWidth);

}else if(document.layers){

return(innerWidth);

}else{

return(-1);

};

}

function GetHeight(){

if(document.all){

return(document.body.clientHeight);

}else if(document.layers){

return(innerHeight);

}else{

return(-1);

};

}

function GetParam(name)

{

var KeyWord = "&" + name + "=";

var UrlStr = document.location.href;

var Parm = UrlStr.indexOf("?") ;

if( Parm == -1 ) {

return null;

};

UrlStr = "&" + UrlStr.substring(Parm+1) + "&";

var iFind = UrlStr.indexOf(KeyWord);

if (iFind == -1){

return null;

};

var retval = null;

var iStart = iFind + KeyWord.length;

var iEnd = UrlStr.indexOf("&" , iStart);

retval = UrlStr.substring(iStart,iEnd);

retval = unescape(retval);

return retval;

}

function ResizeImage()

{

aspect1 = document.all.image1.width/ document.all.image1.height;

aspect2 = GetWidth()/ GetHeight();

divx=1; divy=1;

if( aspect1 >= aspect2 ) {

divy=aspect1;

} else {

divx=aspect1;

};

document.all.image1.width=GetWidth() * divx;

document.all.image1.height=GetHeight() / divy;

}

OnLoad();

</SCRIPT>

</HTML>

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

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

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

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

回答リクエストを送信したユーザーはいません