閉じる
閉じる

あまめも

画面のサイズに合わせて拡大縮小する画像の簡単な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. リストテンプレートも作っておいた方がいいかな?と思ったので作成!…

  3. 「Git」を使ってみてコマンドを忘れるのでメモ2

  4. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

  5. 目次のテンプレートっぽいものを作ろうとローテクで頑張ってみた

  6. 09152021-thumbnail

    phpで日本語urlをエンコードorデコードする簡単な方法

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

  1. thumbnail-pudding
  2. noise-info

Twitter

ページ上部へ戻る