Description
While exploring the bakerydemo-nextjs project, I noticed that images are rendered with inconsistent aspect ratios across multiple sections, including:
- Locations page
- Gallery page
Some images appear unevenly cropped or stretched depending on their original dimensions. This results in inconsistent card heights and visual alignment across the grid.
Since this behavior occurs in multiple areas, it may be related to a shared image component or CSS styling pattern.
Steps to Reproduce
- Run bakerydemo-nextjs locally
- Navigate to the Locations page
- Navigate to the Gallery page
- Observe image rendering differences across cards
Expected Behavior
Images across the site should maintain a consistent aspect ratio and alignment to ensure uniform card layout and visual consistency.
Actual Behavior
Images render with varying proportions depending on the source image, causing inconsistent layout and framing.
Environment
- bakerydemo-nextjs (latest main branch)
- OS: Linux
- Browser: Chrome
- Desktop viewport
Description
While exploring the bakerydemo-nextjs project, I noticed that images are rendered with inconsistent aspect ratios across multiple sections, including:
Some images appear unevenly cropped or stretched depending on their original dimensions. This results in inconsistent card heights and visual alignment across the grid.
Since this behavior occurs in multiple areas, it may be related to a shared image component or CSS styling pattern.
Steps to Reproduce
Expected Behavior
Images across the site should maintain a consistent aspect ratio and alignment to ensure uniform card layout and visual consistency.
Actual Behavior
Images render with varying proportions depending on the source image, causing inconsistent layout and framing.
Environment