Как масштабировать img в зависимости от устройства?

Видно только левый столбец с фото, а navbar всегда подстраивается под ширину окна браузера, как его не меняй.
Читал, что надо задавать @media, но не знаю, как узнать ширину окна браузера в пикселях. Может, widht и height фото задать не в пикселях?

<tbody  class="navbar">

     <tr>

      <td><a href="1.html">...</a></td>

      <td><a href="2.html">...</a></td>

      <td><a href="3.html">...</a></td>

     </tr>

     <tr>

      <td><a href="4.html">...</a></td>

      <td><a href="5.html">...</a></td>

      <td><a href="6.html">...</a></td>

     </tr>

  </tbody>

<table class="index_table">

  <tr>

    <td rowspan="2"><img src="images/my_photo.jpg" alt="" width="500" height="667"></td>

    <td><pre> ...<br> ...<br> ...<br> ...</pre></td>

  </tr>

 table {

        width: 100%;

        }

        .navbar td {

        width: 33.33%;

        }

        .index_table td {

        width: 50%;

        }

       

На таблицах советую верстать только если тебе нужно сделать что-то для емейл-расслыки. Если это так, то ты будешь страдать. Если ты делаешь не для емейл рассылки, то верстка таблицами сделает твой сайт крепким - он никогда не расползется, но ты не сможешь сделать адаптивный дизайн. А у тебя, как я понимаю, проблемы именно с адаптивной версткой.

Я тоже пришёл к такому выводу. Верстаю дивами inline-block, всё автоматически группируется на смартфоне. Ещё бы Flex освоить (я всего полторы недели этим занимаюсь). Вопрос, поймут ли Flex многочисленные мобильные браузеры. Обхожусь без него пока.