CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を縮小してレスポンシブ対応にする方法

CSSで画像をレスポンシブ対応にする基本

Webページ上の画像を画面幅に合わせて自動的に縮小表示させるには、CSSのmax-widthプロパティとheightプロパティを組み合わせるのが最もシンプルで効果的な方法です。

ポイントとなるのは、次の2つの指定です。

  • max-width: 100%; — 画像が親要素の幅を超えないように制御します。画面幅が狭くなれば、画像もそれに合わせて自動的に縮小されます。
  • height: auto; — 幅の変化に応じて高さも自動調整され、画像の縦横比（アスペクト比）が崩れるのを防ぎます。

それでは、以下のコードを実行して、実際の動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            max-width: 100%;
            height: auto;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt = "Online Compiler" width = "300" height = "300">
   </body>
</html>

この設定を行うことで、ブラウザのウィンドウサイズやデバイスの画面幅が変わっても、画像がコンテナからはみ出すことなく、常に適切なサイズで表示されるようになります。

PC・スマートフォン・タブレットなど、さまざまな画面サイズに柔軟に対応できるレスポンシブデザインにおいて、この手法は最も基本的かつ重要なテクニックです。img要素に対してあらかじめ適用しておくことで、レイアウト崩れを防ぎ、快適な閲覧体験を提供できます。

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

  2. HTMLで画像をレスポンシブ対応にする方法【初心者向け解説】

    Webページをスマートフォンやタブレットなど、さまざまな画面サイズに対応させるには、画像をレスポンシブ対応にすることが重要です。HTMLで画像をレスポンシブにするには、CSSで2つのプロパティを設定するだけで実現できます。レスポンシブ画像の基本：2つのプロパティまず、<img>タグを使って画像を配置します。そのうえで、以下の2つのプロパティを指定しましょう。height: auto; … 画像の高さを幅に合わせて自動的に調整します。max-width: 100%; … 画像が親要素（画面幅）より大きくならないよう制限します。具体的には、次のようにインラインスタイルとして記述します。