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



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


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



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


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

なぜか？

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

画像のタグを確認しよう

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

<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"を消すだけでＯＫです。

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

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




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

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




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

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


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




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



でわ ^^)/~

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

　
このブログの目次

　

Comments

ブログ画像の縦横比がおかしくなり、
参考にさせていただいたら、簡単に直りました！
感動！
ありがとうございました☆

Posted by 本木綾子 at 2016年12月05日 21:39