在flexbox中维护图像宽高比

Question

我的问题在于使用响应式方法创建配置文件图像。我已经在Stack Overflow（宽度：100％，height：auto;）中注意到了一些页面，但是没有找到满足我需要的页面（可能还没挖得够多），但问题是我有一个头一些信息和一些按钮的个人资料图片。

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是链接到演示页面。

Answer 1

将<img>标记包装到一个容器中，并将CSS类移到它。

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