HTML で画像を切り抜く

1. CSS プロパティの width、height、overflow を使って HTML で画像を切り抜く
2. HTML で object-fit CSS プロパティを使用して画像を切り抜く

この記事では、HTML で画像を切り抜く方法を紹介します。

CSS プロパティの width、height、overflow を使って HTML で画像を切り抜く

CSS コンテナには、width と height に加えて、画像のトリミングに使用できる overflow プロパティもあります。オーバーフロープロパティをアクティブにするには、画像を特定の幅と高さの div で囲み、overflow を hidden に設定する必要があります。これにより、ベースコンテナがその構造を保持し、画像のオーバーフローがコンテナの背後に隠されるようになります。最後に、margin プロパティを使用してトリミング領域を調整できます。このプロパティは 4つの値を取ります。ただし、4つの値のうち、上からのピクセルと左からのピクセルをそれぞれ表すため、最初と最後の値のみが必須です。

たとえば、URL が https://tinyurl.com/k764en3w の画像を 2つの異なるコンテナに挿入します。2 番目の画像に切り抜きクラスを付けて、いくつかのスタイルを適用して画像を切り抜くことができるようにします。CSS で、cropped クラスを選択し、height と width を 150px に設定します。overflow プロパティを hidden に設定します。次に、境界線を作成します。次に、cropped クラスの img タグを選択し、そのマージンを margin: -10px 0px 0px -180px として設定します。

このようにして、CSS を使用して HTML で画像を切り抜くことができます。

サンプルコード：

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

HTML で object-fit CSS プロパティを使用して画像を切り抜く

object-fit CSS プロパティは、画像のトリミングに役立ちます。5つの値を持つことができますが、画像をトリミングするには、値 cover が最適です。object-fit を cover に設定すると、コンテンツボックスのサイズに合わせながら、画像のアスペクト比が維持されます。object-fit プロパティを object-position と組み合わせて使用​​して、トリミングする画像の領域を調整することもできます。object-position プロパティには、画像を配置するために x%と y%の 2つの値が必要です（デフォルトの位置は 50％50％です）。xpx と ypx のピクセル位置も提供できますが、通常は役に立ちません。

たとえば、画像を 3 回挿入します。最初の画像は元の画像で、2つの画像はトリミングされた画像になります。2 番目と 3 番目の写真にクラス cropped1 と cropped2 を与えます。これらの画像に特定の幅、高さ、境界線を設定します。object-fit プロパティを使用して、両方の画像で cover に設定します。3 番目の図で、object-position プロパティを 20% 10%に設定します。

このようにして、CSS を使用して HTML で画像を切り抜くことができます。

サンプルコード：

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}