0

using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.

this component only has one parent div with no properties.

<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />

do you know what could be the reason ? Let me know if i need to provide more info.

thankyou in advance

uollas
  • 15
  • 4
  • Have you tried making the parent div position relative? Refer: https://stackoverflow.com/questions/74213106/how-to-use-objectfit-for-next-js-13-image – Rameez Feb 16 '23 at 16:28
  • Yes, the parent div is set on relative – uollas Feb 16 '23 at 21:45
  • Inspecting images through devtools i found this: img, video { max-width: 100%; height: auto; } if i untick height: auto it fixes the problem. still i'm not sure how to change it in the code since devtools seems to locate this into the first line of my global.css, which is @tailwind base; and that of course i cannot delete – uollas Feb 17 '23 at 13:05
  • Then try setting height of your element via style attribute, that should override tailwind default. – Rameez Feb 17 '23 at 16:45
  • On nice, glad it worked!. i'll put it as answer, please mark it complete. – Rameez Feb 17 '23 at 17:38

1 Answers1

0

Setting height of your element via style attribute should override tailwind default.

<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
Rameez
  • 1,712
  • 2
  • 18
  • 39