IEを対象外にした場合に使える便利なcss

サイズの基準となるボックスはimgタグ自身の事で、div等のimgを囲むタグではありません。
imgタグ自体にサイズを指定します。
個人的によく使うのはcoverとcortainです。
同じサイズの画像を並べたい時に、全体を見せたい場合はcortain、サムネイル等で「一部が切れたとしてもサイズ感優先」の場合はcoverという感じで使い分けてます。

※ボックスの範囲がわかりやすいよう、背景をつけてます。

画像編集ソフトを使い慣れていない人は値を見てもよくわからないかもしれません。
そういう人でもmix-blend-mode:multiply;（乗算）を使えると便利です。
色が混ざってちょっと濃くなる、と漠然と考えていただいていいですが、重ね方によっては効果的に見えます。

また、乗算は色を合わせるという意味合い上真っ白を無視するような仕組みなので、背景が真っ白の画像は透過したような使い方が出来ます。

上記の記述だけでしたら:where()と:is()の働きに違いは無いですが、効果を後から上書きしたいような場合には:where()が便利です。

cssには詳細度というものがあります。
同じセレクタに対して違う指定が書かれていた場合にどちらを優先するかという目安みたいなもので、詳細度が高い方が優先されます。
基本的には詳しく書かれていた方が詳細度が高く、同じ詳細度なら後に記述している方が優先されます。

ところが、:where（）で書かれている指定は詳細度が0になるという仕組みがあり、後から上書きするのに便利です。

後から低い詳細度の記述で上書きしたいときは:whereを、従来の書き方と同じ挙動にしたい場合は:is()を使いましょう。
尚、scssの場合はちょっと出番はないかもしれません。