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

CSS を使用して画像のサイズ変更とトリミングを行う

この記事では、CSS を使用して画像のサイズ変更とトリミングを行う方法を説明します。この手法を使用すると、元の画像のアスペクト比が異なる場合でも、画像を特定の幅と高さで表示できます。

画像のサイズ変更とトリミング

画像のサイズ変更とトリミングを行うには、 img プロパティとbackground-image プロパティを組み合わせて使用​​できます。 img プロパティを使用すると、アスペクト比を維持しながら画像のサイズを変更できます。背景画像プロパティを使用すると、画像を希望のサイズにトリミングできます。

例

次の例を考えてみましょう。

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

ステップ 1: サイズを変更する画像

<br><img  src="/static/imghw/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="CSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?" ><pre class="brush:php;toolbar:false">  style="max-width:90%">

この手順では、アスペクト比を維持しながら、画像のサイズを 200x150 ピクセルに変更します。 .

ステップ 2: トリミング画像

<br><div><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;"> 

この手順では、サイズ変更された画像が 200x100 ピクセルにトリミングされます。

組み合わせアプローチ

これらのテクニックを両方組み合わせて、目的の結果を達成できます。たとえば、次のコード:

<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

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

<div>
<p></p>
<p>このコードは、画像のサイズを 200x150 ピクセルに変更してからトリミングします。 200x100 ピクセルまで。</p>
</div>

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