- 締切済み
画像の縮小について
htmlでサイズの大きな画像を貼り付けるのに、等倍で縮小したいんですが、簡単にできるタグって有りますか？ 例えば、2000×1000ピクセルを半分にしたい場合、普通はwidth="1000" height="500"にすると思うんですが、これを一括で％で指定する方法ってないでしょうか。 width="50%"でやってみたんですが変な形につぶれてしまったので… 違うのかな、と。 ヘタな説明で分かりにくいかと思いますが、教えてください。
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
みんなの回答
なぜheightも50%にしない？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLは、通常のサイズ(あまり大きな画像サイズは負荷が大きいので使うべきではない)で、表示したいサイズに画像を縮小して画像を貼り付けます。 また、横幅だけウィンドウに合わせて自由に決めたいときは <p style="position:relative;width:60%;margin:0 auto;"> <img src="images/sample04.jpg" width="480" height="360" style="display:block;width:100%;height:auto;" alt="河口湖畔から望む富士山の紅葉"> </p> で良いはずです。ウィンドウ巾に合わせて、自在に拡大縮小されます。 imgは置換インライン要素ですから、画像サイズに合わせて伸縮しますがブロック要素にすることで、自分が所属する親コンテナブロックの内寸を参照できるようになります。 ポイントは、スタイルシートで、display:block;とheight:autoを指定することです。HTMLの属性、width="" height=""[詳細度(0,0,0,0)]は、その要素(ここではimg)に、スタイル属性(style="")で、それらがあれば[詳細度(1,0,0,0)]上書きされますが、後方互換(スタイルシートを認識しないブラウザのために)、一応記述すべきです。
- 0909union
- ベストアンサー率39% (325/818)
http://www.htmq.com/style/zoom.shtml http://msdn.microsoft.com/en-us/library/ms535259(v=VS.85).aspx http://msdn.microsoft.com/en-us/library/ms535169(v=VS.85).aspx http://www.microsofttranslator.com/BV.aspx?ref=IE8Activity&a=http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fms535169%28v%3DVS.85%29.aspx
お礼
参考にさせて頂きます。
- k0021
- ベストアンサー率26% (32/120)
<img src="xxx.jpg" style="width:50%;" alt="テスト"> 上記記述でないのですか。 縮小したり拡大すうと大きさが変わりますが
お礼
その記述でないです。 縮小したり拡大すると大きさが変わるのはわかります。
通常はそのような大きさの画像はディスプレイでは表示できないので、htmlタグで見た目だけ小さくしても表示に必要なデータ量は同じなのでグラフィックツール等で現実に縮小したりかなり縮小したサムネイル画像を貼るというのが一般的です。 そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。 またへんなところでWidth=50%とすると、現在の表示されている画像解像度の半分という指定になるので注意が必要です。
お礼
解像度の半分になってしまうことがあるんですね… 大変参考になりました。ありがとうございます。
関連するQ&A
- 画像をきれいに縮小する方法
perl で画像をなるべくきれいな状態で５０％程度縮小して表示する方法はないでしょうか。 HTMLタグの 「<IMG ～ width=xxx height=xxx>」でやるとつぶれてしまうので、JavaScript とか Web上で実現できそうなら、他の方法でもいいのですが・・・
- ベストアンサー
- Perl
- ドリームウィーバーで画像を縮小
すいません。ドリームウィーバーＣＳを使っているのですが、 ＣＳＳを使った部分でちょっと分からないことがあります。 divで囲って、幅250ピクセルに指定したとします。 そこへ幅500ピクセル、縦1000ピクセルを入れて、自動的に画像を縮小させたりする事は できるのでしょうか？ 事前に何かのソフトで画像を縮小してから放り込めば解決なのですが、大量の画像があるため 画像を加工に非常に時間がかかります。 いろいろＣＳＳのボックスなどの設定を試してはいるのですが、上手くいきません。 私が行いたいのは、上記のサイズのdivで、画像を入れると横幅は50％になりますよね？ その後自動的に縦幅も50％となり、画像が歪むことなく、縮小した画像が表示できたら良いと 考えています。 実際は画像の半分だけ表示されスクロールバーが付いたりします。（このあたりはオーバーフロー設定で変わりますが・・） もし上記が可能ならやり方を教えてもらえると助かります。
- 締切済み
- CSS
- 画像の縮小
ピクチャー画像の縮小を行いたいのですが、 sw = Picture1.ScaleWidth * 0.1 sh = Picture1.ScaleHeight * 0.1 w = Picture1.Width h = Picture1.Height Picture2.Height = h * 0.1 - Picture2.Height - Picture2.ScaleHeight Picture2.Width = w * 0.1 - Picture2.Width- Picture2.ScaleWidth Picture2.PaintPicture Picture1.Picture,0,0,sw,sh のようなプログラムを行うと、画面で見えている範囲のピクチャーは縮小してくれるのですが、VB画面からはみ出る部分は切れてしまいます。 ピクチャーを1つずつ、とって縮小していくとなると相当な時間がかかってしまうので、早く処理できる方法は無いでしょうか？ ご存知の方は教えて下さい。
- ベストアンサー
- Visual Basic
- メール添付の画像縮小について
ウインドウズのアウトルックでメールを見ているのですが、送信先から、画像（Ａ4サイズスキャンのもの）が送られてきたのですが、プリントアウトすると、そのサイズの1/4（左上）しかプリントが出来ません。 色々と、画像縮小に関して探したのですが、、、 例えば、画像の選択を指定して、印刷画面で、選択範囲のみ印刷、、、や、、、印刷画面にて変倍から入って、印刷サイズ？に変倍など、、。どのようにしても、そのようにプリントアウトされてしまいます。 その他、方法として、あとは、相手先に画像を指定などして？送信してもらうしかないのでしょうか？？？ その方法などありましたら、教えて下さい。 プリントできなくて、困った状況です。 至急、宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- JPG画像のファイル容量を縮小する
画像サイズそのままでファイルサイズを縮小したいです。（画質落とす） （画像の縦横はそのまま、ファイル容量2000kb→1000kbに） 縮小専門だと画像サイズを指定しないといけないみたいなのでダメでした。 画像サイズそのままで一括複数ファイルをやってくれるソフトってないでしょうか？ ファイル容量指定でも縮小率指定でも構いません。
- ベストアンサー
- 画像・動画・音楽編集
- フォルダ一括画像縮小ソフトを教えてください
あるフォルダに入ってる画像を一括して縮小できるソフトを教えてください。 ただし、次のすべての条件を満たしているものを希望しています。 ・さまざまなサイズの画像を、指定のサイズ（たとえば720x720）に収まるよう、一括で縮小してくれる ・指定のサイズに収まるよう、縦横比を変えないで縮小できる機能がある ・保存できる画像の種類を指定できる（jpeg、gif、bmpなど） ・jpeg圧縮の場合は、圧縮率を設定できる 有料ではなく無料ソフトを希望しています。 よろしくお願いします。
- ベストアンサー
- フリーウェア・フリーソフト
- 画像の縮小ソフト
画像の縮小ソフトを探しています。 機能としては フォルダ一括で変更できる 縮小時画像がきれい これだけなら色々あると思いますが下記の機能をもった変換ソフトを探しています。 同一サイズに変更できる。 縦長画像を横長サイズに変更する時、画像が横に伸ばされず、縦のサイズを基準で縮小され、なおかつ横の足りない部分に指定の色を付加できるもの。 たとえば２００ｘ３００の画像を３００ｘ１５０に変更した場合、画像自体は１００ｘ１５０の画像に変換され横の足りない部分には指定の色で埋め尽くされれ出力画像としては３００ｘ１５０になるものです。 色々探しては見たのですが・・・ お心当たりのある方がいらっしゃいましたら宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- iframe 内の画像を自動縮小させない方法
iframe 内の画像を自動縮小させない方法が分かりません。 <iframe src="**.ｊｐｇ" width="100" height="100" scrolling="yes" style= resize:none; "> このような resize 禁止指定をしても、画像がフレームのサイズに強制的に押し込まれて 原寸表示ができません。 CSSを用いる方法でも構いませんので、よろしくお願いいたします。
- ベストアンサー
- CSS
- PHP GD 画像が縮小できない
宜しくお願いします。 ※ローカル環境です。 (WinXP PHP5 Smarty PEAR MySQL ※ＧＤはインストされています。) 下記のコードで、サーバーにもともと上げてある画像（jpeg）を縮小して、 それをブラウザに表示させようと思います。 ですが、縮小されずに、元の画像サイズのまま表示されてしまいます。 おかしな点をご指摘下さいませ。 また、(1)で、 jpegファイルを取り込むコードがありますが、これは、 もし画像がGIFであったりＰNGの場合を顧慮するなら、 取り込む際にそれぞれを判定するのが基本でしょうか？ もし、今回のようにサバー元の画像をリサイズするのであれば、拡張子もわかっていますので、 jpegファイルだけのことを考えればいいですが、 たとえば、任意のアップロードされたファイルを扱う場合は、上記３種類を判定すして処理すべきですよね？ 以上、２点を回答下さいませ。 // -- (1) // 画像を読み込む。 $file_path = "http://www元画像.com/img/aa.jpg"; $image = ImageCreateFromJPEG($file_path); //JPEGファイルを読み込む /*********** $image = ImageCreateFromGIF($file_path); //GIFファイルを読み込む $image = ImageCreateFromPNG($file_path); //PNGファイルを読み込む ************/ // -- (2) // 画像のサイズを取得。 $width = ImageSX($image); //横幅（ピクセル） $height = ImageSY($image); //縦幅（ピクセル） // -- (3) // 縮小した画像のサイズを決める。 $new_width = 100; $rate = $new_width/$width; //圧縮比 $new_height = $rate*$height; // -- (4) // 空の画像を作成する。 $new_image = ImageCreateTrueColor($new_width, $new_height); // -- (5) // サンプリングしなおす ImageCopyResampled($new_image,$image,0,0,0,0,$new_width,$new_height,$width,$height); // -- (6) // ブラウザに出力する場合。 ImageJPEG($image); //ImageJPEG($image,'simpletext.jpg'); //ImageGIF($image); //環境によっては使えない //ImagePNG($image); // -- (7) // メモリを解放する。 imagedestroy ($new_image); imagedestroy ($image);
- ベストアンサー
- PHP
- photoshopCSで、レイアウトの中の一部の画像を指定サイズで縮小
photoshopCSで、レイアウトの中の一部の画像を指定サイズで縮小したいのですが、どうすればよいでしょうか？ 編集-パスを変形-拡大縮小で、手で動かしながら変形したのですが、 手動なので、なかなかうまくできません。 ・レイアウトの中の一部の画像を指定サイズで縮小するには、どうすればよいのでしょうか？ ・編集-パスを変形-拡大縮小まで行うと、サイズ指定の画面が出てくるのですが、別の作業をすると、すぐに消えてしまいます。これを常に表示しておくにはどうすればよいでしょうか？ ・このサイズ指定画面で、XYはピクセル(だと思う)なのですが、WHが％表示です。このWHをピクセル表示にするには、どうすればよいでしょうか？
- ベストアンサー
- グラフィックソフト
お礼
詳細かつとても分かりやすく、参考になりました。 ありがとうございます。