<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?
2
Answers
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 contexth-[400px]
since you’re using tailwind`.img-tag
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:
If you only set
h-[400px]
, width on DOM will beheighSizeOfImgSource
/400px*widthSizeOfImgSource
(unit: px)