知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
  • /
  • 知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法
  • 記事公開:2018/05/16
  • 最終更新:2019/03/06

知ってますか?画像サイズを親要素の横幅に収まるように可変させる最も簡単な方法

デバイスの横幅に合わせて画像を拡大縮小させる方法をご紹介しています。CSSのみで対応する方法ですので、面倒なjsの設置やimgタグを書き換える必要もありません。参考にしてください。

この記事は約 2 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

レスポンシブデザインでは必須!親要素に画像が収まるようにする方法

レスポンシブデザインでサイトを構築するとき、必ず必要になってくるのが、親要素に合わせた画像の拡大縮小処理です。

レスポンシブデザインでは、要素がデバイス内に収まるようにしなければなりません。
当然、画像も含まれます。

画像を親要素に合わせて拡大縮小させるのは簡単で、CSSのみで対応可能です。

以下を追記してやればOKです。

img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記をCSSファイルに追記してやれば、親要素の横幅に合わせて画像が拡大縮小されます。
画像の元サイズ以上には拡大されません。

上記をCSSに追記した場合、サイト内の全ての画像に適応されます。
一部の画像のみに適応したい場合は、以下の様にCSSを調整してください。

#test img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記の場合、<div id=”test”>~</div>の中にある画像のみに適応されます。

.test-img {
max-width: 100%;
height: auto;
width /***/:auto;
}

上記の場合【class=”test-img”】が設定されている画像のみに適応されます。

試してみてください。

まとめ

レスポンシブデザインでは必須となる、親要素に画像が収まるようにする方法をご紹介しました。

CSSに4行追記するだけで、親要素に画像が収まるようになります。
この機会にやり方を覚えてはいかがでしょうか?

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2019/04/26

    【たった1分】ドメインから使っているサーバーを調べる方法

    ドメインからサイトが設置されているサーバーを調べる方法をご紹介しています。専門的な知識は必要ありません。コンテンツの中で紹介しているWEBサービスを利用(無料)すれば、どなたでもドメインからサーバー会社を調べることができます。 記事を読む

  • 2019/06/03

    片方だけ横幅を設定してfloatする方法

    片方だけ横幅を設定してfloatする方法をご紹介します。横並びの要素で一方だけ横幅を設定したいあなたは、このコンテンツを参考にしてください。2分後にはあなたの希望が形になります。 記事を読む

  • 2019/04/29

    バナーデザインに役立つ!バナーデザインのまとめサイト7選

    今回はクオリティの高いバナーを集めたギャラリーサイトをご紹介いたします。クオリティの高いバナーを制作するコツは、クオリティの高いバナーを多く見ること。多くのバナーを見て、デザインセンスを磨きましょう。 記事を読む

  • 2015/11/19

    これで一発解決!固定ナビゲーションのページ内リンクのズレを解消

    固定ナビゲーションのページ内リンクがズレてしまう現象を解消する方法をご紹介します。固定ナビゲーションとページ内リンクを合わせて使うと、遷移する位置が思った場所よりズレしまうことがあります。そんな時の解決方法を2分程度で知ることができます。 記事を読む

  • 2019/03/06

    CSSだけで長い文字列を「…」と省略表示する方法

    CSSだけで長い文字列を省略表示する方法をご紹介します。文字列が要素からはみ出す場合、末尾に「…」を付けて省略表示させる方法です。興味のある方は、3分間でカスタマイズ方法をマスターしてください。 記事を読む

コメントを残す

(必須)

CAPTCHA