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

CSSでパーセント（%）を使って画像の高さと幅を設定する方法

CSSでは、画像のサイズを%（パーセント）で指定することができます。パーセント指定を行うと、親要素のサイズを基準として画像の高さと幅が自動的に調整されるため、レスポンシブなレイアウトを作成する際に非常に便利です。

以下のコードは、画像の高さと幅をそれぞれ50%に設定した例です。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: 50%;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <p>パーセントでサイズを指定した画像</p>
      <img src = "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/155/images/course_155_image.png" alt = "CSS" width = "200" height = "200">
   </body>
</html>

ポイント解説

  • width: 50% — 親要素（この場合はbody要素）の幅に対して50%の幅で画像が表示されます。
  • height: 50% — 親要素の高さを基準に50%の高さで表示されます。ただし、親要素に明示的な高さが指定されていない場合、heightのパーセント指定は意図した通りに機能しないことがあります。
  • HTML側のwidth属性やheight属性は、CSSによるスタイル指定が優先されるため、最終的な表示サイズには影響しません。

画面サイズに応じて画像を柔軟に拡大・縮小させたい場合は、パーセント指定のほかに、max-width: 100% を組み合わせる方法もよく使われます。これにより、画像が親要素からはみ出すことを防ぎつつ、レスポンシブ対応を実現できます。

  1. CSSのwidth・heightプロパティの使い方を徹底解説！基本構文と実用例

    CSSでは、height（高さ）プロパティとwidth（幅）プロパティを使用して、要素のコンテンツ領域のサイズを指定できます。ただし、これらのプロパティで設定した値には、マージン（margin）、パディング（padding）、ボーダー（border）は含まれない点に注意しましょう。つまり、ボックス全体のサイズではなく、あくまで中身のコンテンツ部分に対してのみ高さと幅が適用されます。 height・widthプロパティの構文 CSSのheightプロパティは、次のように記述します。 Selector {     height: /*値*/ } CSSのwi

  2. CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例

    CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector {    height: /*値*/    width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height