Tailwind: how to fit image inside navbar parent div - css

Question

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.
My code is:
<div class="flex flex-wrap items-center justify-start
m-3 p-2 pl-6 ">
<span class="title-text light-text text-xl">Some Title</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<div class="rounded">
<img class= "relative rounded-full border
border-gray-100 shadow-sm
max-w-max h-full " src="../../assets/dog.jpeg" />
</div>
</div>
Without image it looks like this:
But with image it looks like this:
However I want it to look:
How do I achieve it, using Tailwind?

Answer 1

You can use object-fit:cover, note that you will have to set the with and the height of the img to 100%.
.rounded{
display: flex;
align-items: center;
justify-content: center;
}
.rounded img {
height: 100%;
width: 100%;
object-fit: cover;
}
here is the link for tailwind-css meaning you can use this class object-cover only
<div class="rounded">
<img class= "object-cover relative rounded-full border
border-gray-100 shadow-sm
max-w-max h-full " src="../../assets/dog.jpeg" />
</div>

Answer 2

Give the fixed height to the nav and the image container,
<div class="flex flex-wrap items-center justify-start px-4 bg-gray-800 text-white h-20">
<span class="title-text light-text text-xl">Some Title</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<span class="pl-10">Some link</span>
<div class="h-16 ml-auto">
<img class= "rounded-full border border-gray-100 shadow-sm h-full" src="../../assets/dog.jpeg" />
</div>
</div>

Answer 3

Kinda late but I've just been working on this and the solution for me was to set:
image height className=h-8 to control sizing
container margins to control positioning className=ml-auto.
I'm using tailwind in react, so full code is:
import GitHubLogo from '../media/GitHubLogo.svg';
const tools = [
'Transcribe',
'Reverse complement',
'Translate',
'Primer check',
'Primer design',
];
export const Navbar = () => (
<nav className="flex w-11/12 p-2 mx-auto rounded bg-coral-std">
<h1 className="text-4xl btn"> welcome</h1>
{tools.map((tool) => (
<a
href={`/#${tool}`}
className="inline-flex px-6 py-2 rounded hover:bg-slate-200/20"
key={tool}
>
{tool}
</a>
))}
<a href="https://github.com/ccozens/mol-bio-tools/" target='_' className="ml-auto">
<img
src={GitHubLogo}
alt="GitHub logo"
className="h-8 pr-1 mx-auto"
>
</img>
Source code</a>
</nav>
);
Note the mx-auto flag in the image class centres the image over the image label; this isn't impacting the right positioning.