閉じる
閉じる

あまめも

画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

インフォ

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

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

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

 

csswidthプロパディを設定

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

img {
    width: 100%;
}

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

サンプル画像

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

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

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

サンプル画像

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

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

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

具体的には、

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

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

サンプル画像

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

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

インライン要素の場合

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%;
}

関連記事

  1. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  2. 文字をマーカーのように強調するCSS設定。個人用まとめです。

  3. リンク

    サイトでリンク箇所に分かりやすくアイコを追加する方法【css】

  4. list

    <ol>リストを好きな番号から連番にしたい時

  5. WordPressで画像を挿入する時に勝手にリンクが貼られるので…

  6. gitのリモートリポジトリをDropboxで作成してpushする…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る