Flexbox水平拉伸图像

Question

我的网站上的图片出现了奇怪的不一致之处。它的结构如下：

<div class="intro">
    <div>
        <p>Some text</p>
        <p>More text</p>
    </div>
    <img src="images/headshot.jpg" />
</div>

.intro {
    display: flex;
    align-items: center;
}

.intro>img {
    width: 11rem;
    height: 11rem;
    border-radius: 6rem;
    margin: 1rem 0;
    align-self: center;
}

.intro>div {
    padding-right: 1rem;
}

在Chrome 74中进行强制重新加载后，其呈现如下（错误）：

但是如果我检查元素并再次打开和关闭img的任何属性，则它的呈现方式如下（正确）：

我遇到过this question，该建议将align-self: center;添加到img，但这没有帮助。

您可以在此处实时查看问题：https://leonoverweel.com/。知道是什么问题吗？

Answer 1

根据Piotr的评论，将flex-shrink: 0添加到.intro>img似乎可以解决此问题。