CSS画像サイズの設定方法-CSSチュートリアル-php.cn

CSS画像サイズの設定方法

coldplay.xixi

リリース： 2023-01-05 16:12:28

オリジナル

45164 人が閲覧しました

CSS 画像サイズを設定する方法: 1. 画像サイズ設定は img タグを通じて導入され、構文は [img{width:150px;height:60px}] です; 2. [background-size] を使用します背景画像のサイズを指定する属性。

CSS画像サイズの設定方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS 画像サイズの設定方法:

1. img タグを通じて導入された画像サイズ設定

画像タグに幅と高さを直接設定します。HTML img タグに幅と高さの値を直接設定する場合、HTML 単位は必要ありません。デフォルトは PX ピクセルです。

img タグで高さと幅を設定する利点は直感的です。記事に画像を挿入する場合、この方法を使用して画像の高さと幅を制御できます。欠点は、画像リストの場合、このようにフォーマットすると、大量の HTML コードが追加されるため、一律に変更するのは不便になります。

css Set img image size 構文:

img{width:150px;height:60px}

ログイン後にコピー

ここでは、CSS の幅を 150px に、CSS の高さを 60px に設定します。CSS の幅と CSS の高さの値に注意してください。 CSS スタイルには単位があるので覚えておく必要があります。生活の際は必ず単位を持ち歩きましょう。

img にスタイルを直接設定すると、Web ページ全体の画像の幅と高さが制御されます。指定したオブジェクト内の画像の幅と高さのスタイルを制御するには、通常、img の前にオブジェクトの CSS 名を追加します。

2. CSS で背景画像のサイズを設定します:

background-size 属性は、背景画像のサイズを指定します。

文法:

background-size: length|percentage|cover|contain;

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS画像サイズの設定方法