ブラウザの横幅が変わった時の複数画像表示

横幅320pxの画像を1枚表示
viewportはinitial-scale=1.0とする

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ja">
<head>
     <meta charset="UTF-8">
     <title>画像の縮小</title>
         <meta name="viewport" content="initial-scale=1.0,width=device-width">
<style>
    .center {
        text-align:center;
    }
</style>
</head>
<body>
　　<div class="center">
    <img src="img/cat.jpeg">
  </div>
</body>
</html>

PC版：画像よりも広いブラウザで閲覧
当然、ブラウザの横幅におさまる

PC版：画像よりも狭いブラウザで閲覧
ブラウザに収まらない　例:287pxのブラウザでみてみる

mobile版：画像よりも狭いブラウザで閲覧
view-portを設定しているので、画面幅で表示される

画像を2枚にします

1
2
3
4
5
6
<body>
　　<div class="center">
    <img src="img/cat.jpeg">
    <img src="img/frog.jpeg">
  </div>
</body>

PC版：複数画像よりも広いブラウザで閲覧

PC版：複数画像よりも狭いブラウザで閲覧
収まらないので、改行されて表示される

mobile版
収まらないので、改行されて表示される

ブラウザ幅に合わせて画像サイズを自動調整したい

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
     <meta charset="UTF-8">
     <title>画像の縮小</title>
     <meta name="viewport" content="initial-scale=1.0,width=device-width">
<style>
    .center {
        text-align:center;
    }
    .center img {
        width:45%;
    }
</style>
</head>
<body>
　　<div class="center">
    <img src="img/cat.jpeg">
    <img src="img/frog.jpeg">
  </div>
</body>

widthを%で指定すれば、ブラウザサイズに合わせて自動縮小される。

ただ、これ、画像が可変だと、例えば3マイになったらあかんやん。。