CSS のみを使用して画像のサイズを変更し、特定のサイズにトリミングするにはどうすればよいですか?

CSS を使用してサイズ変更およびトリミングされた画像を表示する

要件: 指定された幅と高さで URL から画像を表示する、元のアスペクト比に関係なく。画像のサイズを変更してから、必要なサイズに合わせてトリミングする必要があります。

解決策: img プロパティと背景画像プロパティを組み合わせます:

• Use img tosizeアスペクト比を維持しながら画像を切り取ります。
• background-image を使用して、サイズ変更された画像を希望のサイズに切り抜きます。 size.

例:

サイズ 800x600 ピクセルの画像を 200x100 として表示したいとします。ピクセル。

HTML:

<div class="crop">
    <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck">
</div>

CSS:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

説明:

• .crop クラス希望の幅と高さを備えた画像のコンテナを定義します。
• img 要素は、アスペクト比を維持しながら画像のサイズを変更するために使用されます。幅と高さは、元のサイズ比率を維持するように設定されます。
• img 要素に負のマージンが適用され、.crop コンテナ内で中央に配置され、切り取られます。余白は、元の画像のフル サイズ (400px x 300px) と希望の表示サイズ (200px x 100px) に基づいて計算されます。

このアプローチにより、画像のサイズ変更とトリミングを動的に行うことができ、さまざまなデバイスで希望のサイズとアスペクト比で表示されます。

以上がCSS のみを使用して画像のサイズを変更し、特定のサイズにトリミングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。