画像のアスペクト比を維持しながら、指定の比率でトリミングしたい。
表示サイズはレスポンシブ。ただし最大幅は元画像の横幅での表示の例です。

css

    .img-fluid-trim{
        display: inline-block;
    }
    .img-fluid-trim > div{
        height:0;
        width: auto;
        overflow:hidden;
    }
    .img-fluid-trim-1x1 > div{
        padding-bottom:100%; /* w:h = 1:1 */
    }
    .img-fluid-trim-2x1 > div{
        padding-bottom:50% /* w:h = 2:1 */
    }
    .img-fluid-trim-1x2 > div{
        padding-bottom:150%; /* w:h = 1:2 */
    }
    .img-fluid-trim-16x9 > div{
        padding-bottom:56.25%; /* w:h = 16:9 */
    }

    .img-fluid-trim > div > img{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:initial;
      /*transform: translate(0, -10%); トリミング開始高さを変える場合*/
    }

html

        <div class="img-fluid-trim img-fluid-trim-16x9" >
            <div><img src="/path/to/img.jpg" ></div>
        </div>