- ベストアンサー
画像のサイズ
PHP＋MYSQLで掲示板のようなサイトを作っています。 画像をアップロードして表示できるようにしています。 このとき、様々なサイズ(縦横比)の画像を想定しないといけないと思いますが、表示させるサイズを縦100px以下、横80px以下に揃えたいのですが、どのようにすればよいのかわかりません。 <img src... height="100px" width="80px"> とすると、画像の縦横比が変わってしまいます。 (当然ですが。。。) 画像を100px×80px以下に揃える方法を教えてください。 よろしくお願いいたします。
- xyz_1990
- お礼率66% (127/191)
- PHP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
getimagesize()などの関数で、画像の縦横をはかり、 アスペクトをみながら100x80いかに調整すればよいでしょう。
関連するQ&A
- 画像の縦サイズが小さいと隙間が・・・
縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（IE6）。 隙間を空けずに、縦方向にぴったりとくっつけたいので困っています。 ネットで調べて色々な方法で試してみましたが、解決しません。 IE6ではあきらめるしかないのでしょうか。 どなたか解決策があれば知恵をかしてください。よろしくおねがいします。 （例） <div style="width:100px; background-color:red;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> </div>
- ベストアンサー
- HTML
- <IMG>タグにて縦横サイズの指定の仕方
画像をアップロードさせ、ブログのプロフィール欄に画像が表示されるようなシステムを作っています。 （注※私は開発側で、ブログ利用者としての質問ではありません。） アップロードされてくる画像の縦横の比率や大きさは毎回バラバラなモノがアップロードされてくると思いますが、プロフィール欄の画像枠を２００×２００pxとして、その範囲に表示画像を収めたい場合はどうすればよいのでしょうか？ 例えば <img src=xxx.jpg height=200> と指定した場合、 ２４０×４００pxの画像がアップロードされてくれば １２０×２００pxとして表示してくれますが、 ４００×２４０pxの画像がアップロードされてきてしまうと 横幅が２００ピクセル以上で表示されてしまいます。 かと言って、 <img src=xxx.jpg height=200 width=200> と指定したのでは ２４０×４００pxの画像の場合、横広がりの引き伸ばし画像で、おデブちゃんみたくで表示されてしまいます。 どなたか解決策ご存知でしたらご教示宜しくお願いします！ <IMG>タグでは無くCSSでの方法でも大歓迎です！
- ベストアンサー
- HTML
- フォントサイズでレイアウトがずれる？
cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに（四角のボタン）下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、ｃｓｓ共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか？？ 申し訳ありませんが、どなたかご教授お願い致します。
- ベストアンサー
- HTML
- max-widthを指定した場合の縦サイズのリサイズ方法
画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS （Movable Type）でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか？宜しくお願いします。
- ベストアンサー
- HTML
- HPの画像のサイズ変更について
質問です。 今HPをつくっていてTableの中に画像をいれているのですが サイズ変更がうまくいきません。今は、 <td><img src="画像名.jpg" alt="画像の説明" width="100px" height="70px"></td> としているのですが、本当はサイズを％で指定したいのです。 上の書き方で画像が表示されたので px のとこを %に変えてみましたが%に変更すると表示されなくなってしまいます。 どうしたら%で表示できるのでしょうか？？ 回答よろしくお願いいたします(>_<)
- ベストアンサー
- その他（インターネット・Webサービス）
- HTMLソースの中で、画像を表示する場合、サイズ、高さにPXをつけない
HTMLソースの中で、画像を表示する場合、サイズ、高さにPXをつけないのはなぜでしょうか。 たとえば、<img src="画像名" width="300" height="200" alt="xxx">と記述します。 なぜ、"300px" "200px" としないのでしょうか。pxがつくと画像が表示されないからということではなく、そもそもpxを省略している理由ってあるのでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像１" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像２" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。
- ベストアンサー
- HTML
- javascript画像切り替えにサイズ指定
何時間探ってもわかりません。。。。 どなたか回答していただけたら幸いです。 下記を参考とても簡単で正常に動きました！ しかし。。。 問題は、画像のサイズを指定したいのですが。。。 どこに挿入したらいいのでしょうか。。？ (現在サイズ指定できていないから画像サイズがばらばら。。) あらゆる場所に width= height= みたいなタグを 入れてみたのですが。。。入れると、起動しない。。 ********************* 表示したい場所に <IMG SRC="画像ＵＲＬ１(*1)"NAME="SP"> <SCRIPT language="javaScript"> <!-- var NO=1; img=new Array(5(*2)); img[1]="画像ＵＲＬ１(*3)"; img[2]="画像ＵＲＬ２(*3)"; img[3]="画像ＵＲＬ３(*3)"; img[4]="画像ＵＲＬ４(*3)"; img[5]="画像ＵＲＬ５(*3)"; UP(); function UP(){ setTimeout("UP()",5000(*4)); document.SP.src=img[NO]; NO=NO+1 if(NO>5(*5)){NO=1;} } //--> </SCRIPT> (*1)－最初から表示されている画像のＵＲＬ (*2)－切り替わる画像の全体数 (*3)－順番切り替わる画像のＵＲＬ (*4)－画像の切り替えスピード(単位はミリ秒) (*5)－一番最後の画像のナンバーを入力します。 ****************************** 参考: http://www.devicereign.net/TOP/support/Jscript/S18.html おまけに、今までは下記のように、 写真に白枠を入れていました。 下記は、三枚の写真が(背景白枠入り)横に並んでいる状況です。 同じ構成で、 この三枚を同時にいくつかの画像と切り替えというのが目的です。 ＊これはページの真ん中に配置しているので、 </table>とかは下の方で行っています。 <tr> <td><div align="center"> <table width="590" border="0" cellspacing="0" cellpadding="0"> <td width="173"><img src="画像1" alt="画像1" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> <img src="画像2" alt="画像2" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> <img src="画像3" alt="画像3" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a> </tr> よろしくお願い致します。
- 締切済み
- JavaScript
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- jqueryでdata-の画像サイズの取得方法
通常の場合、 <img src="hoge.png" /> $("img").on("load",function(){ var w = $(this).width(); var h = $(this).height(); $(this).css({"width":w +"px", "height":h +"px"}); }); でサイズは取得できますが、 <img src="hoge.png" data-src="hoge2.png" /> の場合でhoge2.pngの画像サイズを取得する方法を探しています。 分かる方がいらしたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 解決しました。