title: Tailwind: how to fit image inside navbar parent div
body: <p>I have a simple header in which I want to insert a profile image. However profile image doesn't fit the header and I'm not sure how to approach it in a responsive manner. I don't want to hardcore the width/height of the image in any manner, but rather I want it to always fit the height of the header, with some paddings.</p>
  <p>My code is:</p>
  <pre><code>    &lt;div class=&quot;flex flex-wrap items-center justify-start
            m-3 p-2 pl-6  &quot;&gt;
        &lt;span class=&quot;title-text light-text text-xl&quot;&gt;Some Title&lt;/span&gt;
        &lt;span class=&quot;pl-10&quot;&gt;Some link&lt;/span&gt;
        &lt;span class=&quot;pl-10&quot;&gt;Some link&lt;/span&gt;
        &lt;span class=&quot;pl-10&quot;&gt;Some link&lt;/span&gt;
        &lt;span class=&quot;pl-10&quot;&gt;Some link&lt;/span&gt;
  
        &lt;div class=&quot;rounded&quot;&gt;
          &lt;img class= &quot;relative rounded-full border
                border-gray-100 shadow-sm
           max-w-max   h-full &quot; src=&quot;../../assets/dog.jpeg&quot; /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Without image it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/Yyg6h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yyg6h.png" alt="enter image description here" /></a></p>
  <p>But with image it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/xjySM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xjySM.png" alt="enter image description here" /></a></p>
  <p>However I want it to look:</p>
  <p><a href="https://i.stack.imgur.com/illD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/illD8.png" alt="enter image description here" /></a></p>
  <p>How do I achieve it, using Tailwind?</p>