在Flexbox中保持图像宽高比

Question

My issue here is creating a profile image with responsive approach. I already noticed some pages here in Stack Overflow (width:100%, height: auto;) but haven't found one that answers my needs(probably have not dug enough), but the issue is that I have like a header with a profile image with a little bit of info and some buttons.

HTML:

<header class="header"> 
    <div class="header__inner">
        <img class="profile__img" src="tmp.png" />
        <div class="profile__info">
            <table>
                <tr>
                    <td>Nome:</td> 
                    <td>Rafael Dos Santos da Silva Rosario da Silva</td>
                </tr>   
                <tr>
                    <td>Idade:</td> 
                    <td>18</td>
                </tr>
                <tr>
                    <td>Aderiu:</td> 
                    <td>04-10-2015</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td><a href="#add"><img class="add_friend" /></a></td>
                    <td>
                        <label for="sidebar__toggle">
                            <a><img class="more__info" /></a>
                        </label>
                    </td>
                    <td><a href="#note"><img class="show__notifications" /></a></td>
                </tr>
            </table>
        </div>
        <div class="profile__options">
            <table>
                <tr>
                    <td><a href="#fotos"><img class="show__gallerys" /></a></td>
                </tr>
                <tr>
                    <td><a href="#amigos"><img class="show__friends" /></a></td>
                </tr>
                <tr>
                    <td><a href="#amigos"><img class="show__messages" /></a></td>
                </tr>
            </table>
        </div>
    </div>
</header>

I am using flexbox with media queries to control all 3 of these(img, profile__info, profile__options) but can't find how in the the earth am I supposed to have the profile image(maintain it's ratio) responsive. The following is the base CSS:

.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 QUERIES:

@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: Here is the link to the demo page.

Answer 1

将<img>标记包装到容器中，然后将CSS类移至该容器中。

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