图像在 flex 容器中拉伸但不能使用 align-self-center答案

【问题标题】：Images stretched in flex container but cannot use align-self-center图像在 flex 容器中拉伸但不能使用 align-self-center
【发布时间】：2019-10-14 19:11:49
【问题描述】：

我有以下标记（引导程序 4）：

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

由于容器被弯曲，图像被拉伸。我知道align-self-center 会解决这个问题，但是，我不希望图像居中。我希望图像为align-self-left（左对齐而不是居中），但这再次拉伸了图像。

有什么办法吗？

【问题讨论】：

在图像中添加不需要任何类的图像父级

标签： html css bootstrap-4 flexbox

【解决方案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>

【讨论】：

【解决方案2】：

应该是align-self-start。 Bootstrap flex 不使用术语left

【讨论】：

【解决方案3】：

不要使用<img class="align-self-center" src="#"/>，而是使用<img class="align-self-start" src="#"/>。这应该可以解决您的问题（基本上这意味着您的图像将与列的开头对齐）

【讨论】：