<img src="~~" width="300"
と書けばどんなサイズの画像でも横幅を300pxに抑えることが出来ますよね?
どんなサイズの画像だとしても横幅300px以内,縦300px以内の大きさに抑えて表示させたいのですが、可能でしょうか??
画像の形式のよって、見れないパソコンもあるかもしれませんが、
ほぼ見る事が出来ますよ!
ただ、大きさではなくファイルのサイズ(メガバイトなど…)が大き過ぎるものは、表示に時間がかかったり見れない場合もあります。
タグ
<Img Src="???" Width="300" Height="300">
<>は<>に換えて使ってください。
可能だと思います。
ただし、
<img src="hatena.jpg" width="300" height="300">
と指定した場合、
仮に元の画像の縦横比が1:1ではない場合、ゆがんで見えてしまいます。
ですので、なるべく元の画像の縦横比とあうように縮小されたらよいと思います。
例えば元の画像:600×400なら
width="300" height="200"
という感じです。
ただ、web上にアップロードした画像を表示させるのでしょうから、
ある程度、画像ソフトなどで縮小してから使用されたほうが無難かもしれません。
どんな画像だとしても(元の画像サイズが分からなくても)出来るようにしたいのです
ちなみに、
画像が大きすぎて困る場合の方法です。
はてなではありませんが、
http://okwave.jp/qa1863396.html
にヒントがあります。
>このソフトで「変形」→「伸縮と傾き」と選択していくと、
>写真そのものの大きさを小さくすることは可能です。
ここで「水平方向」「垂直方向」のいずれも、同じパーセンテージ(例えば両方とも50%に指定)
とすれば縦横比は保たれます。
参考までに、
http://d.hatena.ne.jp/toku4sr4agent/20061130
に掲載している写真は、(元の写真は1600×1200ですが)
上記のような方法でリサイズしたものです。
ソフトで操作ではなく、どんな画像だとしてもHTMLで解決したいのです。
>どんなサイズの画像だとしても横幅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を書き換える
という手順で可能です。
HTMLだけであれば、
(1)横長の画像
<img id="pic1" src="ファイル名" width="300" height="auto">
(2)縦長の画像
<img id="pic1" src="ファイル名" width="auto" height="300">
のいずれかしかできないです。
縦長なのか横長なのかが事前に判らない場合は、
(1)JAVAScriptなどを使ってクライアント側で動的に変更
(2)CGIによってサーバー側で画像を加工
といったような手段が必要になってきますが、環境に依存するだけでなく、負荷も大きいので、実際にはどちらも使わずに事前にサイズ調整するものですけど、、、、
img タグでは width , height を指定しない。
スタイルで max-width,max-height を指定する。
img {
max-width:100px;
max-height:100px;
}
max-width/height は IE7 から対応ですのでもうちょっと/しばらく待ったほうがいいかもしれませんが。(gecko系やoperaは対応済み)
追記。
max-width,max-heightは
IE7 で、かつ、標準モードでレンダリングされる場合だけで有効になるようです。(互換モードでは無視される。)
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>
元画像の縦横比を保ちたいんですよねぇ。