ホームページに画像を表示する方法をまとめておきます。

基本のコードです。このタグで画像をしてしてやると表示されるようになります。

 <img src="" alt="">

この表示された画像は画面を小さくしても変化はありません。画面を小さくすると写真の端が消えていきます。

これを画面を小さくしてもうまく表示させるようにしたいと思います。

ここでCSSを使って調整します。一番簡単な方法は幅、高さどちらかを"%"で指定してやる方法です。

img{
    width: 100%;
}

これで画面いっぱいに画像が表示続けます。

img{
    width: 100%;
    height: 300px;
}

という感じに高さをしてしてやると

高さは決まっているので幅は常に100%なので伸びた画像になります。

例えば

 div{
  　 width: 500px;
   　height: 500px;
     border: solid 1px;
 }

の枠に写真を収めたい場合には、

何もしなければ

となりますが

CSSを

とすることで

右側が切り取られて歪みがないものとなっています。

右側を切り取らず左がわを切り取りたい場合は

object-position: 100% 100%;

と指定してやると右側は全部表示されるようになります。

画像処理についてまだまだ色々あります。参考サイトです

max-width、min-widthも使えるテクニックです。最大の幅、最小の幅を指定することができます。これで大きすぎ、小さすぎを防ぐことができます。

もう一つ大事なテクニック

はみ出した部分隠すoverflow:hidden、スクロールバーを出すscrollなど。