目次
1.イメージ①(黄色の枠の中の画像)
黄色のボックスの中にイメージ①の画像があります。
ここではイメージ①は「photoimg1.png」を使用しています。
2.画像(イメージ①)を表示するソースコード
index.phpをエディタで開くと、59行目あたりに「<div class=”fluid box_img”><img src=”img/photoimg1.png” alt=””/></div>」があります。
このコードがイメージ①のソースコードです。
1 2 3 |
<!--▼画像--> <div class="fluid box_img"><img src="img/photoimg1.png" alt=""/></div> <!--▲画像--> |
3.イメージ①を別の画像ファイルに変える
「photoimg1.png」ではなく別の画像を設定してみましょう。
「image_1.jpg」を作ってその画像を指定してみます。
ファイルの中のコードを指定するファイル名に書き換えて上書き保存をします。
4.ワンポイントアドバイス
パソコン表示の時の画像の横幅は365pxになるように指定しています。それより大きなサイズの画像でも縮小されてきちんと表示されます。
上記を見てみると、「image_1.jpg」のサイズは、横:4000px 縦:2666pxです。
横:4000px 縦:2666pxの画像を使用していても、
パソコン・タブレット・スマホそれぞれきちんと縮小されて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。
パソコン・タブレット・スマホそれぞれきちんと縮小されて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。