【CSS】画像の位置を調整する

img画像の縦横比を維持したままトリミングする

exampl.html

<div>
  <img src="*******" class="img">
</div>

example.module.scss

div {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    object-position: 0% -10%;  //数値は例えです 
  }
}

object-fit: cover
object-position: 横の位置 縦の位置 //

この２つを設定することで、画像の縦横比を維持したまま画像をトリミングできます。

こちらの記事が参考になりました。