在 flexbox 中保持图像纵横比

Question

我的问题是使用响应式方法创建个人资料图片。我已经注意到 Stack Overflow 中的一些页面（宽度：100%，高度：自动；）但是没有找到满足我需求的页面（可能还没有挖掘足够），但问题是我有一个带有带有一些信息和一些按钮的个人资料图片。

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>

我正在使用带有媒体查询的 flexbox 来控制所有这 3 个（img，profile__info，profile__options）但是我找不到我到底应该如何拥有配置文件图像（保持它的比例）响应。下面是基数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 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是演示页面的link。

Answer 1

将 <img> 标签包裹到容器中，然后将 CSS class 移至其中。

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

在 flexbox 中保持图像纵横比

Maintain image aspect ratio within flexbox

html

css

media-queries

flexbox