Bootstrap 4 - Карусель автоматически увеличивает часть изображения, чтобы привести его в соответствие. Есть ли способ изменить это?

Question

Он увеличивает одну область изображения, можно ли изменить, где она увеличивается?

Да, я знаю, что правильное разрешение было бы лучше, но я не знаю оптимального разрешения для карусели.

Вот ссылка на скрипку, чтобы вы могли ее увидеть. https://jsfiddle.net/rmbeo4oh/

<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="wpimages/received_10214620274008052.jpeg" alt="First slide">
    </div>
</div>

Answer 1

Лучшим решением было бы использовать что-то вроде Photoshop для сокращения ресурсов в соответствии с вашими потребностями, но если это не вариант, вы можете использовать CSS-преобразование.

Я предполагаю, что вы просто заинтересованы в настройке вертикального выравнивания, поскольку изображения в карусели установлены на 100% ширины. Либо создайте несколько вспомогательных классов (т. Е. .pull-20), либо добавьте к изображениям описательные имена классов (т. Е. .security-camera) и измените их соответствующим образом:

<img class="d-block w-100 security-camera" src="wpimages/received_10214620274008052.jpeg" alt="First slide">

.security-camera {
    transform: translateY(-20%);
}

https://jsfiddle.net/rmbeo4oh/1/