在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>