CSS：画像の一部分のみ表示させたい

Question

前提・実現したいこと

元のある画像を縮小するのではなく、画像の一部分のみ表示させたい。
実現したいことは、添付画像を参照ください。
※赤枠外⇨白枠外の間違いです

発生している問題・エラーメッセージ

画像のサイズを変更することは可能だが、一部分表示が実現できない。

該当のソースコード

      <section id="section_s" class="section section_s">
      <div class="slide-show">
      <img src="/Users/xxn/Desktop/xxx/images/bg-about.jpg" /> <!-- スペーサー画像のURL -->
      <img src="/Users/xx/Desktop/xxx/images/bg-index.jpg" /> <!-- 1枚目の画像のURL -->
      <img src="/Users/xx/Desktop/xxx/images/bg-portfolio.jpg" /> <!-- 2枚目の画像のURL -->
      <img src="/Users/xx/Desktop/xxx/images/bg-video.jpg" /> <!-- 3枚目の画像のURL -->
      </div>
    </section>

    .sction_s {
      background-color: white;
      position: relative;
      inline-size: -webkit-fill-available;
    }

    div.slide-show {
        width: 100%; /* スライドショーの幅 */
        max-width: 100%; /* スマホで表示が欠けないように */
        margin: 10px auto; /* 中央揃え */
        position: relative;
    }

    .slide-show img {
        animation: show 12s infinite; /* 12秒のスライドショーを繰り返し */
        height: 200px;
        max-width: 100%;
        height: 100vh;
        opacity: 0;
        position: absolute; /* 画像を重ねて表示 */
        left: 0;
        top: 0;
    }

    @keyframes show {
        0% {opacity: 0}
        17% {opacity: 1}
        33% {opacity: 1}
        50% {opacity: 0}
    }

    .slide-show img:nth-of-type(1) {
        position: relative;
    }

    .slide-show img:nth-of-type(2) {
        animation-delay: 0s;
    }

    .slide-show img:nth-of-type(3) {
        animation-delay: 4s;
    }

    .slide-show img:nth-of-type(4) {
        animation-delay: 8s;
    }


    .section_s {
     background-color: white;
     position: relative;

    }

試したこと

画像の切り抜きで　.slide-show img に追加。

 clip: rect(10px, 365px, 100px, 205px);

width 100%で指定していたのにも関わらず、また一からくり抜きサイズ考えないといけない....
他に手はないのだろうか.....

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

以下のページの方法はどうですか？

CSSだけで画像をトリミングする方法 | たねっぱ！

あとは、CSSスプライトの方法を調べてみるかですかね。