Currently, I am using Next's Image component to display a logo. Although the image itself is 1843x550 px, I have specified the width and height properties to adjust it to fit within a space of 83x24 px. However, due to a slightly different aspect ratio, a warning message has been triggered:
It appears that the image located at src "/images/Wordmark_Horizontal.png" has had either its width or height modified, but not both. In cases where CSS is used to resize an image, make sure to include the styles 'width: "auto"' or 'height: "auto"' for maintaining the aspect ratio.
The dilemma arises when setting both width and height to auto with CSS results in the image expanding to 128x38 px, which exceeds my intended size requirements.
My main query revolves around why the image is automatically being resized to dimensions that were not explicitly mentioned. Additionally, what steps should be taken to preserve the image's aspect ratio while also ensuring it remains appropriately sized?
This is the current code snippet:
<Image
src={'/images/Wordmark_Horizontal.png'}
width={83}
height={24}
alt="logo"
className="h-auto w-auto"
/>