Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – img's height not consistent

  <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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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)

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search