Resizing image to circular size in CSS - html

Currently, my image is getting shown like this, but I want them to be circular and each of equal width and height.
They aren't square now and I have added the below CSS tailwind code but still am not getting them all in the circular.
<div className="cursor-pointer">
<div className="w-full overflow-hidden rounded-full mb-2 border border-black">
<img src={banner} alt={title} loading="lazy" className="w-full" />
</div>
<h3 className="text-sm md:text-lg font-medium ">{title}</h3>
</div>
I have tried different iterations with hard-coded height and width, but still am not able to figure out how to get ahead of it.
Any help is highly appreciated!!
EDIT:
On w-20 and h-20, the images get circular and on doing w-25 and h-25 they become disproportionate again. Any lead on why so?
And on adding w-20 and-20 the text isn't in the middle anymore. How can I fix that?

For tailwind, you can use the CSS for rounded-full on the image tag. You need to provide a fixed height and width to the image as well like
<img class="w-50 h-50 rounded-full" src="pic.jpg" alt="Rounded avatar">
Here is Leonardo DiCaprio below for you :)
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<img class="p-1 w-50 h-50 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtyS3wBrnrkDXvhSo8SEXpvUXqXajtTSi9zD33IpKxAJHlijHnaY1pFT30NpaxxnP58PM&usqp=CAU" alt="Bordered avatar">

Give your image's parent div element the same width and length and make it rounded full,
use this tailwind classes
w-10 h-10 rounded-full

Related

So I cant get these cards right. these images and cards are changing in size whenever I insert a <h> with more text, the more text the more changes

Here is an example
here is my code
<div className="lg:flex gap-10 mx-auto">
<div className="text-center shadow-lg p-10 rounded-xl my-10 border-4 border-teal-600 flex-auto items-center">
<Image src={figma1} width={"100%"} height={"100%"} layout="responsive" className="rounded-xl border-teal-600" />
<div className="text-center shadow-lg p-10 rounded-xl my-1 flex-auto items-center">
<h3 className="text-lg font-medium pt-8 pb-2">Less text smaller picture</h3>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Vis</button>
</div>
</div>
Im using tailwind.
I dont know how to fix this. Ive tried overflow-hidden- h-full etc, but cant seem to find a solution
You have width={"100%"} height={"100%"}, and the text is making the container bigger, so it's logical that the 100% will be bigger when the container is bigger because the text is bigger. If you don't want that, you can just change the width and height using a fixed width, and not a width with %, that follows the change in the container.
You can set margin:0 for the h3 tags. Since <h> tags have a default margin to them. You have to set them to 0 manually
.text-center h3{
margin :0
}

Tailwind random padding in column layout

I'm struggling to do this well, but I want a 2-column fixed layout with fine-grained control on the width. This looks almost perfect to me, but the top-left element has some mysterious padding.
Parent
<Layout>
<div className="flex flex-col mt-5 w-full h-full sm:h-fit space-y-8 sm:space-y-0 sm:flex-row flex-wrap">
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
</div>
</Layout>
Child
<div className="flex flex-col w-full h-fit sm:w-1/3 pl-5 space-y-2 m-3">
{/* Date */}
<span className="font-fira text-xs text-[#B3B4B4]">January 1, 2023</span>
{/* Title */}
<span className="font-inter font-semibold text-xl hover:opacity-50">building and automating a homelab in 2023</span>
{/* Tags */}
<div className="flex">
{/* Can support multiple tags in theory, so we wrap */}
<div className="flex space-x-1 text-xs text-[#B3B4B4] font-fira">
<img src="/icons/tag.svg" className="w-2" />
<span>life</span>
</div>
</div>
</div>
I realize grid might be better here, but I like and am more comfortable with flexbox. How can I achieve this below picture minus the odd padding/margin?
The code looks fine according to tailwind play.
Mysterious padding would be because of the padding placed in the parent elements which you haven't produced in your question. The code you have produced is working as expected !. Check the above mentioned link

How can I unstyle bottom rounded border without changing the shape of top rounded border?

I'm trying to recreate Google. When you focus on the search bar at Google.com, the bottom border will unstyle the rounded border. So I tried to make this effect by setting focus to unstyle bottom border-radius, but this will change the top border's shape.
the code I write is roughly like this.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="rounded-[24px] bg-white px-3 focus-within:rounded-b-none">
<input type="text" class="w-full outline-none" />
</div>
I think you need to set a fixed height on the div and the rounded corners to match half of that. Like:
<div class="h-screen w-full bg-slate-500 p-8">
<div class="h-8 rounded-t-[1rem] rounded-b-[1rem] bg-white flex items-center px-3 focus-within:rounded-b-none">
<input type="text" class="w-full outline-none" />
</div>
</div>
In tailwind, h-8 equals 2rem. I also centered the input vertically in the div with flex.
See working tailwind play example.

How do I shrink a flexbox with two elements inside of it, using Tailwind CSS?

I have been trying to shrink my flex box, but I haven't had much luck getting this to work.
Here is the code sample:
<div className="flex justify-center bg-white rounded w-23 mx-auto">
<p>Contact Number</p>
<button className="px-4 py-3"><DropIcon /></button>
</div>
This is the current state of the element

How to hide horizontal overflow absolute element

I'm using tailwind. I want to create a layout with a fixed-size image. My container is 1200px and centering viewport.
The image will be overflow when the viewport is smaller, but I want to hide the overflow part of the image. That means the user can't scroll to view it. Thanks
Here is my code: https://play.tailwindcss.com/YVOEhykx1E
Here, Is the little update! I think you can do more better by exploring documentation
<div class="h-screen mx-auto bg-red-500 grid grid-cols-12 gap-8 overflow-hidden">
<div class="col-span-12 col-start-8">
<img class="object-cover h-full w-full" src="https://images.unsplash.com/photo-1640686708297-e6dc01470fb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="" />
</div>
</div>