<img
src={url}
width={300}
height={400}
alt=""
className="object-fill rounded-tl-md"
/>
I want to set the height to 400 and cover the div. But the problem I am having is that <img>‘s size is just the picture’s width and height. It is not 400px. How can I force the img to be 400px height?
To ensure that the <img> element has a height of 400px and covers the entire div, you can use TailwindCSS utilities. The issue you’re facing is because the image’s intrinsic size overrides the specified height.
Here’s how you can force the image to have a height of 400px and ensure it covers the div:
<img
src={url}
alt=""
className="w-[300px] h-[400px] object-cover rounded-tl-md"
/>
If you only set h-[400px], width on DOM will be heighSizeOfImgSource/400px*widthSizeOfImgSource (unit: px)
tldr: add h-[400px] to img className.
width and height property is to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. If you want the img tag to have 400 px height, you need to add that in the style (or in this context h-[400px] since you’re using tailwind`.
img-tag