こんにちは！ あますた(@amaguristar)です。

• 「画像を画面サイズに合わせて拡大縮小したいんだけどやり方が分からない」

って時ありませんか？ その問題直ぐに解決できます。

　

cssでwidthプロパディを設定

単純に「画面の幅に合わせて画像を表示したい」って時はwidthプロパディに100%を設定するだけ。具体的には、

img {
    width: 100%;
}

と設定するだけ。これだけで画面の幅に合わせて画像が拡大・縮小されます。

ところがこの状態だと横幅のみ拡大縮小されてしまうので、画像のアスペクト比を一定にしたい場合は、

img {
    width: 100%;
    height: auto;
}

と、heightを設定してください。

画像拡大の最大値を設定したい時

• 「画像の劣化を防ぐために拡大時の最大値を設定したい」

て事も中にはあるかと思います。そんな時はmax-widthプロパティを設定。

具体的には、

img {
    width: 100%;
    max-width: 256px;
    height: auto;
}

と設定すると、画面幅に合わせて拡大縮小されますが、256px以上は拡大されなくなります。

画像を中央に表示させたい

画面の中央に表示したい場合は、簡単に設定する場合は次の２パターン。

インライン要素の場合

HTML

<p class="sample-p">
    <img 〜>
</p>

CSS

.sample-p {
    text-align: center;
}

/* ※ img は同じ */

ブロック要素の場合

HTML

<div class="sample-div">
    <img 〜>
</div>

CSS

.sample-div {
    width: 100%;
    max-width: 256px;
    margin: 0 auto;
}

img {
    width: 100%;
}

どちらのパターンでも下記の様に中央に表示されます。

まとめ

画像を画面幅に合わせてアスペクト比(縦横比)を変えずに拡大・縮小する場合は、

img {
    width: 100%;
    height: auto;
    max-width: 256px; /* 拡大する際の最大値 */
}

※ max-widthプロパティは無くても問題ありません。拡大による画像の劣化を防ぐために設定。

画像を中央に配置したい場合は、

インライン要素として扱う場合

例) HTML
<p class="sample-p"><img 〜 ></p>

.sample-p {
    text-align: center;
}

/* ※ img は同じ */

ブロック要素として扱う場合

例) HTML
<div class="sample-div"><img 〜 ></div>

.sample-div {
    width: 100%;
    max-width: 256px;
    margin: 0 auto;
}

img {
    width: 100%;
}