CSSで画像の幅と高さを設定する方法

画像は Web デザインにおいて重要な役割を果たします。画像の幅と高さを適切に設定すると、Web ページがより美しく、より合理的な構造になります。では、CSS を使用して画像の幅と高さを設定するにはどうすればよいでしょうか?

まず、HTML コードに画像を挿入するときは、次の点に注意する必要があります。

1. alt 属性を使用する: alt 属性は、HTML コードにテキストの説明を追加するために使用されます。挿入された写真。画像の読み込みに失敗した場合、alt 属性はユーザーが画像の内容を理解するのにも役立ちます。
2. 画像の幅と高さを指定する: 画像の幅と高さを設定するときは、HTML タグの width 属性と height 属性を使用できます。ただし、この方法は柔軟性に欠けており、異なるサイズのデバイスに対して応答性の高いデザインを実現することはできません。

したがって、CSS のbackground-imageプロパティとbackground-sizeプロパティを使用して画像の幅と高さを設定することをお勧めします。以下にいくつかの実践的な CSS ヒントを示します。

① 固定幅と固定高さを設定する

CSS で幅と高さの属性を使用して、以下に示すように画像の固定幅と固定高さを設定します。 ##

.img{
  width: 300px; /*设置图片宽*/
  height: 200px; /*设置图片高*/
}

もちろん、省略形で設定することもできます:

.img{
  width: 300px; height: 200px; /*用“；”隔开即可*/
}

② コンテナに応じて幅と高さを適応させる

画像がコンテナに適応することを認識する必要がある場合があります。コンテナのサイズが変化するときの幅。このとき、CSS の background-size 属性を使用して、その値を「contain」または「cover」に設定できます。

「contain」は画像が完全に表示されていることを意味しますが、幅や高さが十分ではない可能性があります。

「cover」は画像がコンテナ全体に表示されていることを意味しますが、画像が完全に表示されます。

以下に示すように:

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  background-size: contain; /*或者：background-size: cover;*/
}

③ 画像を比例的に拡大縮小する

画像の比率を変更しないようにするために、「padding-top」を設定できます。値がpercentageの属性。親コンテナの幅に基づいて画像の高さを決定し、比例したスケーリングを実現します。

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  padding-top: 50%; /*比例数值等于图片的高/宽*100% */
  background-size: cover; /*铺满背景容器*/
}

上記は、CSS 画像の幅と高さを設定する 3 つの一般的な方法です。柔軟な使用により、Web デザインにおける画像表示を簡単に最適化し、ユーザー エクスペリエンスを向上させることができます。

以上がCSSで画像の幅と高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。