CSS画像サイズ設定

Web サイトが発展し、デザインがますます複雑になるにつれて、写真は Web サイトのデザインに不可欠な要素になってきました。 Web サイトのデザインでは、画像サイズの設定は非常に重要であり、Web サイトの読み込み速度とユーザー エクスペリエンスに直接影響を与える可能性があります。この記事では、Webサイトのデザインをより良くするためにCSSで画像のサイズを設定する方法を紹介します。

1. width 属性と height 属性を使用してサイズを設定する

CSS で画像のサイズを設定する最も簡単な方法は、width 属性と height 属性を使用することです。これら 2 つのプロパティ値を設定することで、画像のサイズを制御できます。サンプル コードは次のとおりです。

img{
    width: 200px;
    height: 200px;
}

上記のコードでは、幅: 200px、高さ: 200px を設定して、画像のサイズを 200 ピクセルの正方形に変更します。もちろん、対応する値で画像のサイズを設定することもできます。

この方法で設定したサイズは画像を伸縮させたり、画像の品質に影響を与える可能性があることに注意してください。したがって、この方法を使用する場合は、画質への影響を避けるために、画像のアスペクト比が設定されたサイズと一致していることを確認してください。

2. max-width 属性と max-height 属性を使用してサイズを設定する

width 属性と height 属性を使用することに加えて、max-width 属性と max-height 属性を使用して次のこともできます。画像のサイズを設定します。この方法も比較的一般的であり、画像のアスペクト比を維持しながら画像を伸縮したりしません。以下はサンプル コードです:

img{
    max-width: 100%;
    max-height: 100%;
}

上記のコードでは、max-width: 100% と max-height: 100% を使用して画像の最大サイズを設定します。これは、画像の実際のサイズに関係なく、親要素のサイズを超えることは決してないことを意味します。

3. object-fit 属性を使用して画像サイズを調整する

上記 2 つの方法では要件を満たせない場合は、CSS3 の object-fit 属性を使用して画像サイズを適応的に設定することもできます。画像のサイズ。 object-fit 属性は、要素を含むブロック内でレンダリングするときに要素のコンテンツがどのように適合するかを指定します。

使用可能な値は、fill、contain、cover、scale-down の 4 つです。値の説明は次のとおりです。

1. fill: 画像を比例的に伸縮または圧縮して、その画像を含むブロックを埋めます。画像が乱れることがありますので、ご注意ください。
2. contain: コンテナに合わせて画像を拡大縮小します。これにより、画像のアスペクト比が維持され、下部領域が表示される場合があります。
3. cover: コンテナ全体をカバーするように画像を拡大縮小し、コンテナを超えた部分をトリミングします。
4. scale-down: この値は contains と似ていますが、常にコンテナ サイズと元の画像サイズの間の最小値を選択します。

サンプル コードは次のとおりです:

img{
    width: 300px;
    height: 200px;
    object-fit: contain;
}

上記のコードでは、object-fit を contains に設定することで、コンテナーにフィットするように画像を拡大縮小します。

要約:

上記は CSS で画像サイズを設定する 3 つの方法です。プロジェクトに最適な方法を選択できます。優れたユーザー エクスペリエンスを実現するには、画像のサイズと品質、サイトの読み込み速度を必ず考慮してください。

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