アスペクト比を維持しながら、HTML と CSS を使用して画像のサイズを変更したりトリミングしたりするにはどうすればよいですか?

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

概要

特定のサイズ内で画像を表示するアスペクト比を維持しながら行うのは困難な場合があります。この記事では、HTML と CSS のテクニックを組み合わせて画像のサイズを効果的に変更およびトリミングする方法について説明します。

背景画像のサイズ変更

background-image プロパティを使用すると、次のことを指定できます。コンテナ要素の背景としての画像。背景サイズ プロパティを cover に設定すると、画像の比率を維持しながら、コンテナに合わせて画像のサイズが自動的に変更されます。タグを使用して、Web ページ内に画像を埋め込むことができます。幅と高さの属性を指定することで、目的の寸法を明示的に設定できます。ただし、元のアスペクト比が維持されていない場合、画像が歪む可能性があります。

組み合わせテクニック

サイズ変更とトリミングの両方を実現するには、上記の方法を組み合わせることができます。背景画像プロパティセットと必要な背景サイズを使用してコンテナ要素を作成します。コンテナ内に を配置します。コンテナよりも小さい寸法の要素。 のマージン プロパティを慎重に調整することで、

例

次のコードは、画像のサイズを変更してトリミングする方法を示しています。

この例では、コンテナ要素 (

) の寸法は 200px × 150 ピクセルには、400 ピクセル x 300 ピクセルのサイズの画像 () が含まれます。コンテナ上でオーバーフローを非表示に設定すると、画像がトリミングされ、 のマージン プロパティを操作すると画像が切り取られます。要素を使用すると、結果として得られる画像は、アスペクト比を維持しながら、コンテナに合わせて効果的にサイズ変更およびトリミングされます。

以上がアスペクト比を維持しながら、HTML と CSS を使用して画像のサイズを変更したりトリミングしたりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。