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

CSS でサイズ変更してトリミングした画像を表示する

問題:

を表示したいアスペクト比が希望のサイズと異なる場合でも、特定の幅と高さの URL からの画像。目標は、元の比率を維持しながら画像のサイズを変更し、希望のサイズにトリミングすることです。

CSS ソリューション:

サイズ変更とトリミングの両方を実現するには、次のテクニックを組み合わせることができます:

• サイズ変更: HTML を使用する画像のサイズを変更するには、img 要素の width プロパティと height プロパティを使用します。これにより、元の画像のアスペクト比が維持されます。
• トリミング: 希望の最終サイズでコンテナ要素 (div など) を作成します。このコンテナに非表示のオーバーフローを設定して、余分な画像をトリミングします。

実装:

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

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

<div class="crop">
  <img src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="Image">
</div>

この例では:

• 画像は幅 200 ピクセル、高さ 200 ピクセルにサイズ変更されます。 150 ピクセル (アスペクト比は維持されます)。
• マージン プロパティは、コンテナ内で画像の位置を移動することによって画像をトリミングするために使用されます。
• コンテナのオーバーフロー プロパティは非表示に設定され、画像の必要な部分は

結果:

この組み合わせにより、元のアスペクト比を維持し、希望に合わせてトリミングしながら、画像を特定のサイズで表示できます。寸法。

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