适合img在边界框中

Question

我想要裁剪的图像适合边界框，但应缩放以适应页面的100％宽度。左，右，上和下的值用于定义边界框，但它们与实际图像尺寸相关。我不确定如果调整图像大小以适应窗口，这些值是否会起作用，所以我认为我必须使用百分比。理想情况下，应加载整个图像，然后根据边界框尺寸进行裁剪，但裁剪区域应缩放以适应100％的窗口。

使用边距使用css是否可以实现此目的？这是我目前使用的代码，但它还没有扩展到窗口的全宽。

    <style>
            .crop {
                    width: 200px;
                    height: 150px;
                    overflow: hidden;
                    position: absolute;
                }

            .crop img {
                width: 400px;
                height: 300px;
                margin: -75px 0 0 -100px;
            }
        </style>

        <div class="crop">

            <img class="background" ng-src="{{ background_image }}">

        </div>

示例裁剪：

符合100％窗口宽度的预期结果：