イメージ②(写真風の画像)の設定

目次

1.イメージ②(写真風の画像)

写真風の枠の中にイメージ②の画像があります。

maptype_34

※クリックすると画像が大きくなります。

ここではイメージ②は「photoimg2.png」を使用しています。(※ここの画像はパソコンの時のみ表示されます。)
タブレット・スマホサイズの画面の時には表示されません。

maptype_35

2.画像(イメージ②)を表示するソースコード

ファイルをエディタで開くと、
175行目あたりに「<div class=”fluid photo_img”><img src=”img/photoimg2.png” alt=””/></div>」があります。
このコードがイメージ②の画像を表示させるソースコードです。

maptype_36
※クリックすると画像が大きくなります。

3.イメージ②を別の画像ファイルに変える

「photoimg1.png」ではなく別の画像を設定してみましょう。
「girl.jpg」を作ってその画像を指定してみます。

maptype_37
※クリックすると画像が大きくなります。

ファイルの中のコードを指定するファイル名に書き換えて上書き保存をします。

maptype_39

yaji

maptype_40

4.ワンポイントアドバイス

イメージ②の画像はパソコンで見るときに、横:325px・縦:380pxになるように設定されています。

maptype_41
※クリックすると画像が大きくなります。

上記を見てみると、「girl.jpg」のサイズは、横:1333px 縦:2000pxです。
それ以上大きなサイズの画像を指定すると、横幅325pxに縮小され、縦のサイズは同じ比率で縮小されます。

maptype_38

横:1333px 縦:2000pxの画像を使用していても、きちんと縮小されて表示されます。
縮小されたあと縦サイズが380pxより大きい場合、はみ出した部分は自動的に切り取られて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。

次に「girl_002.jpg」という画像を作って、それを指定してみます。
この画像の比率は横サイズより縦サイズの方が小さい画像です。

maptype_43
※クリックすると画像が大きくなります。

上記を見てみると、「girl_002.jpg」のサイズは、横:1300px 縦:1100pxです。
縦サイズの方が小さいことがわかりますね。

maptype_42

縦サイズの比率が小さいと、縮小されたときに縦が380pxにならず余白ができてしまいます。
余白ができないようにするためには、縦サイズのほうが大きい画像を指定してください。
できればあらかじめ、横:325px・縦:380pxのサイズで画像を作ってアップロードしましょう。

コメントを残す