Изображения растягиваются в гибком контейнере, но не могут использовать выравнивание по центру

Question

У меня есть следующая разметка (Bootstrap 4):

<div class="col-3 d-flex flex-column">
    <img class="align-self-center" src="#"/>
</div>

Поскольку контейнер согнут, изображения растягиваются.Я знаю, align-self-center решит проблему, однако я не хочу, чтобы изображение было отцентрировано.Я хочу, чтобы изображение было align-self-left (выровнено по левому краю, а не по центру), но это снова растянуло изображение.

В любом случае?

Answer 1

Вот, пожалуйста!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-3 d-flex flex-column">
    <img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>

Answer 2

Вместо использования <img class="align-self-center" src="#"/> используйте <img class="align-self-start" src="#"/>.Это должно решить вашу проблему (в основном это означает, что ваше изображение будет выровнено по началу вашего столбца)

Answer 3

Это было бы align-self-start. Bootstrap flex не использует термин left