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

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

レスポンシブデザインでは必須!親要素に画像が収まるようにする方法 レスポンシブデザインでサイトを構築するとき、 ...

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

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

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

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

画像を親要素に合わせて拡大縮小させるのは簡単で、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行追記するだけで、親要素に画像が収まるようになります。
この機会にやり方を覚えてはいかがでしょうか?

この記事が気に入ったら【いいね】しよう!

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

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

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

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

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2018-09-18

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

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

  • 2017-07-21

    レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめ

    レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策をまとめてみました。レスポンシブサイトの制作時には頭を悩ませる問題かと思います。現に悩まれている方、このコンテンツで頭痛の種を取り除いてください。 記事を読む

  • 2014-12-16

    Google web fontsを使う機会があったので使い方をまとめてみました。

    Google web fontsの使い方を解説しています。コピペで簡単!あなたのサイトでGoogle web fontsを使ってみませんか? 記事を読む

  • 2015-11-09

    予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法

    YOUTUBE動画のサムネイルを取得する方法をご紹介します。YOUTUBEの様々なサイズのサムネイルを取得したい方に向けたコンテンツです。2分後にはお好きなサイズのサムネイルを自由に取得できるようになります。 記事を読む

  • 2015-11-11

    3コピペだけ!アクセスから一定期間で消えるボックスを設置しよう。

    アクセスから一定期間で消えるボックスを設置する方法をご紹介します。コピペだけで設置できますのでどなたでも設置可能です。このコンテンツを確認して頂ければ、3分後にはアクセスから一定時間経過で消えるボックスが設置できてしまいます。 記事を読む

コメントを残す


(必須)