• ベストアンサー

[twip]から[pixel]への変換

お世話になっております。 デザイナー初級者です。 画像の表示についていくつかお聞きしたいことがあります。 サーバ上の画像を画面上にサムネイル表示する際にそのサイズの指定は <IMG src="/img/xxx.jpg" height="n[pixel]" width="m[pixel]" border="0"> という風に表記すると思っています。 今回、サムネイル表示の縦×横のサイズをDBに保持しており、その値を抽出して画像を縮小して表示したいと思っています。 ここで、DBに保持しているサイズの単位が[pixel]ではなく[twip]なのです。 [twip]という単位を扱うことが初めてで色々調べてみた結果、 1 cm = 567 twip 1 インチ = 1440twip ということは分かりました。 [pixel]は、画面の解像度などに依存する単位であると思っていました。 [twip]を[pixel]に変換して表示することが可能でしょうか？ ご存知の方おられましたらご教授ください。

  • HTML
  • 回答数2
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

ブラウザのバージョンにもよりますが <img src="picture.jpg" style="width:1cm;height:2cm"> のようにスタイルを使うことで、単位をｃｍにすることが可能です。 ちなみに、ＩＥ６ではできました。

owen10
質問者

お礼

ありがとうございます。 私の環境もIE6なのですが 早速ためさせていただきました。 [cm]だけでなく、[in(インチ)]などの 相対値ではなく絶対値を示す単位が使えそうです。

その他の回答 (1)

回答No.1

twip = TWentIeth of a Point なので、72dpiを基本とするMacなら 20twipで1ピクセル、96dpiを基本とするWindowsなら15twipで1ピクセ ルなわけですね。サイズを記録した人がどっちの環境を想定していた かがポイント。NeXtBoxで144dpiだったなんてオチは…

owen10
質問者

補足

素早いご回答ありがとうございます。 今回はポータル的なサイトで画像を表示するため ＯＳを限定することが出来ないのです。 ユーザのＯＳ（というよりも解像度？）に応じて サイズを可変にする必要があるのですね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • DBに格納された画像データを縮小して表示したい

    PHP5＋MySQL5です。 DB内のBLOBカラムに、Base64エンコードされた画像データが格納されています。 これを、サムネイル用に縮小して表示したいのですが、widthとheightで小さくするのではなく、ファイルサイズも小さくしてブラウザに渡したいと考えています。 （小さくした画像は保存しません） そこで、DBから取得した画像データを「imagecopyresampled」で再サンプリングしつつ小さくしたいと思いましたが、画面には何も表示されませんでした。 以下、ソースを簡潔に記載します。 $db_img = "DBから画像データを取得"; //600x600の画像 $old_img = base64_decode($db_img); $new_img = imagecreatetruecolor(200,200); //200x200のサムネイル画像を作成 $thumbnail = imagecopyresampled($new_img,$db_img,0,0,0,0,200,200,600,600); print $thumbnail; $old_imgの処理が間違っているのだろうと思うのですが、どのように処理すればいいのかわかりませんでした。 この場合、どのように処理すればいいのか教えていただけないでしょうか？ 宜しくお願いします。

    • 締切済み
    • PHP
  • DBに格納された画像データを縮小して表示したい

    PHP5＋MySQL5です。 DB内のBLOBカラムに、Base64エンコードされた画像データが格納されています。 これを、サムネイル用に縮小して表示したいのですが、widthとheightで見た目だけを小さくするのではなく、ファイルサイズも小さくしてブラウザに渡したいと考えています。 （小さくした画像は保存しません） そこで、DBから取得した画像データを「imagecopyresampled」で再サンプリングしつつ小さくしたいと思いましたが、画面には何も表示されませんでした。 以下、ソースを簡潔に記載します。 $db_img = "DBから画像データを取得"; //600x600の画像 //Base64デコード $old_img = base64_decode($db_img); //200x200のサムネイル画像を作成 $new_img = imagecreatetruecolor(200,200); //再サンプリング・縮小(600x600→200x200) $thumbnail = imagecopyresampled($new_img, $old_img, 0, 0, 0, 0, 200, 200, 600, 600); //画面出力 print $thumbnail; この場合、どのように処理すればいいのか教えていただけないでしょうか？ 宜しくお願いします。

    • 締切済み
    • PHP
  • ピクセルとは？？

    現在、ネットショッピングのページを作る 準備をしているのですが 初心者のため右も左もわからないような状態です。 とても初歩的なことだとおもうのですが教えてください。 良く画像とかフォトショップで作る際に サイズを決めるのですがその単位がピクセルとなっています。 だいたいこのくらいっていう大きさがピクセルだとわからず 困っています。 １ピクセルとはどのくらいなのでしょうか？ 宜しくお願いいたします。

  • ピクセルの大きさについて

    こんばんは、現在22歳で学生をしているものです。 画像を編集する際に、画像の大きさを設定する表示がピクセルや、ｍｍや、いろいろ大きさが選べるとおもうのですが、ピクセル数の1ピクセルがどれくらいの大きさがわからないので教えてください。 因みにＰＣ画面上で図ったらｍｍではないようです。

  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ 　　width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？

    • ベストアンサー
    • HTML
  • ■ポップアップウィンドウをIEで見ると隙間が出来る■

    いつもお世話になっております。 サムネイル画像をクリックすると大きな画像がポップアップウィンドウで表示されるページを作っています。 ツールバー等全て非表示（toolbar=noなど）をして、画像の大きさぴったりにサイズも合わせているのですが、IEで見ると何故か左と上に隙間が出来ます。 macのdreamweaverで作っていて、safariで見ると隙間は出てこないのですが、windowsのIEで見ると隙間が出来てしまいます。 これを画面ぴったりにおさめるにはどうすれば良いのでしょう。 使っているjavascriptは <a href="javascript:;" onClick="MM_openBrWindow('img01.jpg','img01','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=600,height=500')"><img src="small/img-s01.jpg" width="100" height="100" border="0"></a> を使っています。 何に問題があるのかも教えて頂けると助かります。 宜しくお願い致します。

  • HTMLの画像のリンクについて

    ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> 　　　<a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>

  • javascriptを使い、サムネイル表示

    サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </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> よろしくお願い致します。

  • 画像の大きさでピクセルとセンチの違い

    初心者です。画像の拡大縮小で、ピクセル表示とセンチやミリ単位の 表示がありますが、 ピクセルの単位がセンチやミリに対しての違いが分かりません。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する