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%;
    }
}

Теперь проблема заключается в том, что всякий раз, когда я изменяю размер окна, высота остается неизменной, а изображение обрезается с правой стороны. Я хочу показать изображение как центр кадрирования. Так как этого добиться?