Md Bootstrap轮播中心裁剪图像

Question

在我的轮播中，所有图像的高度和宽度都相同。我正在使用媒体查询来设置图像宽度100％。这是我的代码

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block" src="gallery-img1.jpg" alt="Some Value">
        </div>
        <div class="carousel-item">
            <img class="d-block" src="gallery-img2.jpg" alt="Some Value">
        </div>

    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

这是我的CSS代码

@media (min-width: 768px){ 
    #myCarousel .carousel-item img{
        width: 100%;
    }
}

现在的问题是，每当我调整窗口大小时，高度是相同的，并且从右侧进行图像裁剪。我想将图像显示为中心裁切。那么如何实现呢？