percentage width behaving weirdly
hey folks this is my code
I have set the width of div containing text to 60% which means it should 60% width of containing section but it's happening exactly opposite image container is taking 60% width instead you guys can see it in attached image can anyone tell me why its happening
5 Replies
Try setting the image to
max-width: 100%;
instead of width: 100%
. That might be the issue.Try set max-width:50% to both
If you want image w-100% do like this
<div class='flex flex-col'>
<img class='max-w-[100%]>
<p>
</div>
tried that but it didn't worked I have explicitly set the image container width to my desired width
Yes
I thin its best practice to wrap your images in some sort of container like a figure
or a div and set its width how you want it
So
Or if you dont want that maybe doing a flex-grow: 1 on the image and remove its width
Then it should take up the remaining space if you've set the div to 60%