超〜簡単!ブログで画像表示サイズを変更する方法です

2012年02月22日


ども、ピアノ教室管理人です。



今回は単純に
画像の表示サイズ変更のやり方についてご紹介します。


画像の表示サイズの変更は基本中の基本ですら、
しっかりマスターしてくださいね。



サンプル画像はこちらを使います。


「アレクサンダー大王のイッソスの戦い」です。

なぜか?

ただ単にカッコイイからです。^^;



画像のタグを確認しよう


サンプル画像のタグはこうなってます。

<img src="http://kanrinin-fukuon.up.seesaa.net/image/20120222-01.jpg" width="400" height="147" border="0" alt="" />


赤い太字部分が画像の表示サイズを指定してるとこです。


横幅(width)が400ピクセル、
縦(height)が147ピクセルで表示されています。



画像の横幅を変更する


では画像の横幅を300ピクセルに変更してみましょう。

先ほどの赤太字のwidthの値を300に書き換えるだけです。

<img src="http://kanrinin-fukuon.up.seesaa.net/image/20120222-01.jpg" width="300" height="147" border="0" alt="" />


すると画像はこう表示されます。



アレアレ?
縦横の比率がおかしくなりましたね!?

これでは大王に怒られそうです。


では画像の縦のサイズを修正しましょう。



画像の縦のサイズを修正する


画像の縦のサイズの修正は超簡単です。

height="147"を消すだけでOKです。

<img src="http://kanrinin-fukuon.up.seesaa.net/image/20120222-01.jpg" width="300" border="0" alt="" />


すると画像はこう表示されます。




ちゃんと画像の縦横の比率がそろいました。

これでアレクサンダー大王もご満悦でしょう。




画像の場合はYouTubeの動画とちがって、
正確な縦サイズを計算する必要はないんですよね。

ブラウザが勝手に調整してくれるんです。
(IE8,Firefox,Chrome,Opera,Safariで確認。いずれもPC。)


ああ、なんて便利。
お困りの方は是非お試しくださいませ。




ところで、うちのピアノ教室の先生が、
お教室の極秘運営テクニックをお伝えする新たな計画を考え中ですよ。



でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
ブログ画像の縦横比がおかしくなり、
参考にさせていただいたら、簡単に直りました!
感動!
ありがとうございました☆
Posted by 本木綾子 at 2016年12月05日 21:39
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。