• ベストアンサー

html　画像のサイズはどうやって決める？

ものすごく初心者の質問で恐縮です。 HTMLの勉強を始めたばかりです。テキストを読みながら自分で練習しています。画像を指定するときにテキストでは「width="250" height="170"」のようにサイズの指定がされているのですが、自分の撮った画像をサイズ指定するとき、「縦横比」はどうやって判断をするのかな？と思いました。 実際にやってみたのですが、画像の見た目の大きさは「こんな感じ」というのは出来たのですが、比率がうまくわからないので困っています。 なにとぞよろしくお願いします。

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

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.1

画像の指定はピクセルだけでなく％でも指定できます。 またはwidthもしくはheightいずれかのみを指定しておけば、等倍比率で画像が表示されます。 <img src="image.jpg" width="50%" height="50%"> もしくは <img src="image.jpg" width="250">

kunikunichan
質問者

お礼

早々のアドバイスありがとうございました。 理解できました。

その他の回答 (1)

  • ddg67
  • ベストアンサー率22% (1211/5475)
回答No.2

レイアウトソフトなら画面上で画像を拡大縮小させれば、自動的にwidth　やheightに数値を入れてくれるので気にしなくていいでしょう。 本来は別のソフトで拡大縮小してからそのピクセル寸法を読み取って指定するのですが 高さか幅の数値だけ入れれば片方は自動的に調節して比率そのままで表示してくれますよ。

kunikunichan
質問者

お礼

>本来は別のソフトで拡大縮小してから・・・ そういうものなんですね。よくわかりました。 ありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • 画像を、縦横の比率を崩さずに拡大したい。

    初心者です。よろしくお願いいたします。 HTMLの<img src="～">で画像を表示しました。 しかし画像が小さかったため大きくしようと思い、 width,heightを使い、ピクセル数を設定して大きく したところ、縦横の比率が崩れてしまい歪んで しまいます。 縦横の比率を崩さずにそのまま拡大したい場合は どのようにすればよろしいですか？ アドバイスよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像のサイズ

    PHP＋MYSQLで掲示板のようなサイトを作っています。 画像をアップロードして表示できるようにしています。 このとき、様々なサイズ(縦横比)の画像を想定しないといけないと思いますが、表示させるサイズを縦100px以下、横80px以下に揃えたいのですが、どのようにすればよいのかわかりません。 <img src...　height="100px"　width="80px"> とすると、画像の縦横比が変わってしまいます。 (当然ですが。。。) 画像を100px×80px以下に揃える方法を教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • CSSでの画像サイズ指定について

    本などでCSSを練習中です。 画像サイズを自動的に指定したサイズに縮小するCSSは ありますでしょうか？ 以下のよな商品紹介のサムネイルを作りました。 画像部分は常に120×120pxに収まってほしいのですが、 横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。 正方形の画像はそのまま120×120pxになります。 何かアドバイスをお願い致します。 また、他のおかしいところもご指摘下さい。 【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }

    • 締切済み
    • CSS
  • max-widthを指定した場合の縦サイズのリサイズ方法

    画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS （Movable Type）でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか？宜しくお願いします。

    • ベストアンサー
    • HTML
  • htmlでのjpeg表示について

    ＪＰＥＧ画像を表示するＨＴＭＬを作成しました。 特定の縦横サイズにＪＰＥＧを表示したいのですが画像ファイルによって画像が荒く表示されてしまいます。 なにかよい方法はないでしょうか？ htmlでは、imgでheightとwidthを指定しています。 画像ファイルは、ＪＰＥＧ画像を複数ファイル使用します。 heightとwidthを片方だけ指定すると同比率で縮小される方法や 画像を縮小して画面サイズにあわせる方法は確認しています。 画像が複数あるためなにかほかによい方法があればよろしくお願いします。

  • バラバラのサイズの画像のサイズ統一、白色で埋める

    ＶＩＸでいろいろなサイズ、縦横比率の画像を横サイズ指定でリサイズすれば横サイズは統一できますが、縦横比率に従って縦サイズはバラバラになります。 そこで、全ての画像を縦横一定のサイズに統一したい。左上を基点にしてもいいし、中心を基点にしてもいいが、余白部分は白色を埋め込む。 以上のようなことができるフリーソフトってありませんか。

  • 固定枠内への最大画像の貼り付け

    HTMLで作成された固定枠内に、CGIを使用して複数の画像データを、 1枚ずつ表示させるのですが、現在の状態では画像データの大きさによってレイアウが不均一になってしまいます。 そこで、JavaScriptを利用して、元画像の縦横比を保ったまま、 任意の大きさの枠の中で、画像データの大きい方の長さが枠内いっぱいになるように表示したいのです。 つまり、 縦横比のそれぞれ違った、フレームと画像があり、 その画像を、フレームの中心部から拡大して行ったとき、 縦横いずれか先にフレームに接する大きさのところまで拡大表示される 大きさで表示させたいのですが。 下記のスクリプトでは、縦横共通の最大値しか指定できません。 縦横それぞれに最大値を指定できるようにし、 上記の様に表示させるには、 どの様な記述方があるでしょうか。 ご教授、宜しくお願いします。 （スクリプト要素） size = 120 ; function resize(id) { if (document.images[id].width > document.images[id].height) document.images[id].width = size ; else document.images[id].height = size ; } （BODY要素） <img src="hoge.jpg" id="sample1" onLoad="resize('sample1')" />

  • ブログの画像サイズ大きくしたい

    記事の記述方式を［HTML］と選択している場合、こちらのソースをご利用いただくことで記事の中に画像を 配置することができます。と云うことですが 640×480の画像を表示させたいのですが下記のソースでは300×225のサムネイル画像が表示されます、当然ですが <div class="msg-pict"> <img src="http://******.asablo.jp/blog/img/2017/08/03/49a580.jpg" alt="" title="" width="300" height="225"></div> width="300" height="225"の数値をwidth="640" height="480"に変えるとサイズは640×480になりますが拡大されるだけです。 元画像サイズ640×480にするHTML記述を教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • マクロの画像サイズについてお聞きしたいのです。

    マクロの画像サイズについてお聞きしたいのです。 マクロの記録で画像を縦横比を固定するで高さを4.23cmに設定したら、 横が5.64cmになり、下のようなのマクロの値になりました。 そこで質問なのですが、画像の1辺(高さ)を4.23cm(約120pt)に定めると もう一辺が縦横比の固定で自動的に定まるマクロは作れますか？ 表に入る大きさが高さが基準で、いろんなサイズでテストしてみた結果、 サイズ違いの画像ができてしまう時があります。 識者の方、よろしくお願いします。 【↓今作成中マクロの一部】 With Selection.ShapeRange .LockAspectRatio = msoTrue .Height = 120# .Width = 159.75 .Rotation = 0# Selection.Cut ActiveSheet.PasteSpecial Format:="図 (JPEG)", Link:=False, DisplayAsIcon:= _ False Range("A5").Select End With

  • 画像の横に1/2の高さの画像を2枚上下で並べて配置

    HTML初心者です。 1枚の画像の横に、1/2の高さの画像を2枚上下で並べて配置する方法はありますか？ <!-- 画像を括るボックスのwidth値は画像サイズの単位である px を指定する --> <p style="width: 100px; padding: 10px;"><img width="100" height="100" src="./test.png></p> 他のサイトで上記がHITしたのですが。。 スタイルシート（？）ではなく、HTMLで出来るのであれば知りたいです。 すみませんが、ご確認よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する