横幅320pxの画像を1枚表示
viewportはinitial-scale=1.0とする
<!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枚にします
<body> <div class="center"> <img src="img/cat.jpeg"> <img src="img/frog.jpeg"> </div> </body>
PC版：複数画像よりも広いブラウザで閲覧
PC版：複数画像よりも狭いブラウザで閲覧
収まらないので、改行されて表示される
mobile版
収まらないので、改行されて表示される
ブラウザ幅に合わせて画像サイズを自動調整したい
<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マイになったらあかんやん。。
