Поддерживать соотношение сторон изображения в flexbox

Question

Моя проблема заключается в создании изображения профиля с отзывчивым подходом. Я уже заметил некоторые страницы здесь в переполнении стека (ширина: 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), но не может найти, как в земле я должен иметь профиль image (поддерживать его отношение) отзывчивым. Ниже приведен базовый 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>