Html 在flexbox中保持图像纵横比

我在这里的问题是创建一个具有响应性的个人资料图像。我已经注意到Stack Overflow中的一些页面（宽度：100%，高度：auto；），但还没有找到一个满足我需要的页面（可能没有足够的挖掘），但问题是我喜欢一个标题，上面有一个配置文件图像，带有一点信息和一些按钮

HTML:

媒体查询：

@media screen and (max-width: 550px){
    .profile__info{
        width: 63%;
    }
@media screen and (min-width: 551px){
    .profile__img{width: 17%}
    .profile__info{width: 60%;}
    .profile__options{width: 20%}
}
@media screen and (min-width: 650px){
    .profile__img{width: 15%;}
}
@media screen and (min-width: 850px){
    .profile__img{width: 20%; height: auto}
}

OBS：是指向演示页面的链接。包装

.header__inner{
    display: flex;
    flex-wrap: wrap;
}
.header__inner{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.profile__img{
    width: 25%;
}
.profile__info{
    width: 65%;
}
.profile__options{
    width: 12%;
}

@media screen and (max-width: 550px){
    .profile__info{
        width: 63%;
    }
@media screen and (min-width: 551px){
    .profile__img{width: 17%}
    .profile__info{width: 60%;}
    .profile__options{width: 20%}
}
@media screen and (min-width: 650px){
    .profile__img{width: 15%;}
}
@media screen and (min-width: 850px){
    .profile__img{width: 20%; height: auto}
}

<div class="profile__img"><img src="tmp.png" /></div>