CSS はどのようにして、さまざまなサイズの画像に対して均一な画像サイズを保証できるのでしょうか?

CSS を使用してさまざまな画像に対して均一な画像サイズ設定を実現する

魅力的な画像ギャラリーを作成するには、元のサイズに関係なく、一貫したサイズの画像が必要になることがよくあります。 。これは、高さと幅が異なる画像を扱う場合に問題が生じる可能性があります。ただし、CSS は、すべての画像を均一に見せるためのソリューションを提供します。

解決策:

すべての画像のサイズを 100 ピクセル x 100 ピクセルに設定するには、次の CSS を利用します。コード:

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

実装:

1. Float プロパティ: これにより、画像が水平方向に整列され、画像が確実に隣り合って表示されます。インライン配置を作成します。
2. 幅と高さプロパティ: 幅と高さを固定値に明示的に設定します。この場合は両方とも 100 ピクセルです。
3. object-fit プロパティ: 画像全体が指定された範囲内に表示されるようにします。寸法。アスペクト比を維持しながら、それに応じて画像を拡大縮小およびトリミングします。

例:

この概念を説明するために、次の HTML および CSS コードを考えてみましょう。

<img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="CSS はどのようにして、さまざまなサイズの画像に対して均一な画像サイズを保証できるのでしょうか?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="CSS はどのようにして、さまざまなサイズの画像に対して均一な画像サイズを保証できるのでしょうか?" >
<img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="CSS はどのようにして、さまざまなサイズの画像に対して均一な画像サイズを保証できるのでしょうか?" >

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

このコードは、高さと幅が一定の正方形のサムネイルとして画像をレンダリングします。 100ピクセル。画像は、元の比率を維持しながら、これらの寸法内に収まるようにサイズ変更およびトリミングされます。

以上がCSS はどのようにして、さまざまなサイズの画像に対して均一な画像サイズを保証できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。