V0 generates images using the Next.js Image component with incorrect width, height, or layout props, causing stretched, cropped, or overflowing images. Fix this by using the fill prop with a relative-positioned container for responsive images, or specifying explicit width and height with the correct aspect ratio and adding object-cover or object-contain to control how the image fills its space.
Why images scale incorrectly in V0 pages
V0 generates image elements using the Next.js Image component, but it frequently gets the sizing wrong. The AI picks arbitrary width and height values that do not match the actual image dimensions, forgets to include the fill prop when images need to be responsive, or applies Tailwind width classes that conflict with the Image component's built-in sizing. Next.js Image requires explicit dimensions for layout shift prevention, and when those dimensions are wrong, images appear stretched, squished, or break out of their containers. V0 also sometimes falls back to plain HTML img tags that bypass Next.js optimization entirely.
- V0 sets hardcoded width and height props that do not match the image's actual aspect ratio
- Missing fill prop on images that need to be responsive within a container
- No object-fit class (object-cover or object-contain) causing the image to stretch to fill dimensions
- Parent container lacks position: relative, which the fill prop requires
- V0 mixes Tailwind sizing classes (w-full, h-64) with Next.js Image width/height props, creating conflicts
Error messages you might see
Image with src "/hero.jpg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.V0 applied a Tailwind width class but not a corresponding height adjustment. Next.js Image requires both dimensions to scale proportionally.
Image with src "/photo.png" must use "width" and "height" properties or "fill" property.V0 generated an Image component without any sizing props. Next.js Image requires either explicit width/height or the fill prop.
Image with src "/banner.jpg" has "fill" and a "width" or "height" property. When using "fill", do not set "width" or "height".V0 passed both fill and width/height props to the same Image component. These are mutually exclusive — use one or the other.
Before you start
- A V0 project with images that appear stretched, cropped, or overflowing their containers
- Images stored in the /public folder or served from an external URL configured in next.config.js
How to fix it
Use fill with a relative container for responsive images
The fill prop tells Next.js Image to expand to fill its parent container, which is the correct approach for hero banners, card thumbnails, and any image that should adapt to different screen sizes. Without a relative-positioned parent, the image will fill the entire page.
Use fill with a relative container for responsive images
The fill prop tells Next.js Image to expand to fill its parent container, which is the correct approach for hero banners, card thumbnails, and any image that should adapt to different screen sizes. Without a relative-positioned parent, the image will fill the entire page.
Remove width and height props from the Image component and add the fill prop. Wrap the image in a div with position: relative and a defined size using Tailwind classes. Add object-cover to crop the image proportionally.
<Image src="/hero.jpg" alt="Hero banner" width={1920} height={1080} className="w-full"/><div className="relative w-full h-[400px]"> <Image src="/hero.jpg" alt="Hero banner" fill className="object-cover" priority /></div>Expected result: The hero image fills the 400px tall container, maintaining its aspect ratio and cropping evenly from the edges. It responds to different screen widths.
Set correct width and height for fixed-size images
For images with a known display size like avatars or icons, explicit width and height props prevent layout shift and give Next.js the information it needs to generate correct srcset attributes.
Set correct width and height for fixed-size images
For images with a known display size like avatars or icons, explicit width and height props prevent layout shift and give Next.js the information it needs to generate correct srcset attributes.
Set width and height to the intended display dimensions in pixels. These do not need to match the source image dimensions — they define the rendered size. Add className with w-auto h-auto if you want the image to scale within those bounds.
<Image src="/avatar.png" alt="User avatar" width={500} height={500}/><Image src="/avatar.png" alt="User avatar" width={48} height={48} className="rounded-full"/>Expected result: The avatar renders at 48x48 pixels with a circular crop, without any stretching or layout shift.
Fix aspect ratio conflicts with object-fit
When the Image component's dimensions do not match the source image's aspect ratio, the image stretches. Adding object-cover crops the image to fill the space, while object-contain fits the entire image with possible letterboxing.
Fix aspect ratio conflicts with object-fit
When the Image component's dimensions do not match the source image's aspect ratio, the image stretches. Adding object-cover crops the image to fill the space, while object-contain fits the entire image with possible letterboxing.
Add the Tailwind object-cover class when you want the image to fill its container and accept cropping, or object-contain when you want the full image visible. For fill mode, these classes go on the Image element. For width/height mode, wrap in a fixed-size container.
<Image src="/product.jpg" alt="Product" width={300} height={300}/><div className="relative w-[300px] h-[300px]"> <Image src="/product.jpg" alt="Product" fill className="object-cover rounded-lg" /></div>Expected result: The product image fills the 300x300 square, cropping proportionally from the center instead of stretching.
Configure external image domains in next.config.js
V0 generates Image components pointing to external URLs like Unsplash or placeholder services, but Next.js blocks external images by default for security. Without configuring allowed domains, images show broken placeholders.
Configure external image domains in next.config.js
V0 generates Image components pointing to external URLs like Unsplash or placeholder services, but Next.js blocks external images by default for security. Without configuring allowed domains, images show broken placeholders.
Open next.config.js (or next.config.mjs) and add the external domains to the images configuration. Use remotePatterns for more granular control.
/** @type {import('next').NextConfig} */const nextConfig = {}module.exports = nextConfig/** @type {import('next').NextConfig} */const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", }, { protocol: "https", hostname: "via.placeholder.com", }, ], },}module.exports = nextConfigExpected result: External images from the configured domains load and display correctly through the Next.js Image optimization pipeline.
Complete code example
1import Image from "next/image"23export default function ImageGallery() {4 const images = [5 { src: "/photo-1.jpg", alt: "Mountain landscape" },6 { src: "/photo-2.jpg", alt: "Ocean sunset" },7 { src: "/photo-3.jpg", alt: "Forest trail" },8 { src: "/photo-4.jpg", alt: "City skyline" },9 ]1011 return (12 <div className="max-w-6xl mx-auto p-6">13 <h2 className="text-2xl font-bold mb-6">Gallery</h2>1415 {/* Hero image with fill */}16 <div className="relative w-full h-[400px] mb-8 rounded-xl overflow-hidden">17 <Image18 src="/hero.jpg"19 alt="Featured photo"20 fill21 className="object-cover"22 priority23 sizes="100vw"24 />25 </div>2627 {/* Grid of fixed-aspect images */}28 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">29 {images.map((img) => (30 <div31 key={img.src}32 className="relative aspect-square rounded-lg overflow-hidden"33 >34 <Image35 src={img.src}36 alt={img.alt}37 fill38 className="object-cover hover:scale-105 transition-transform"39 sizes="(max-width: 768px) 50vw, 25vw"40 />41 </div>42 ))}43 </div>44 </div>45 )46}Best practices to prevent this
- Use the fill prop with a relative-positioned container for all responsive images instead of hardcoded width/height
- Always add object-cover or object-contain to prevent image stretching when dimensions do not match aspect ratio
- Include the sizes prop to help Next.js generate the correct srcset for different viewport widths
- Add priority to above-the-fold images like hero banners to disable lazy loading and improve LCP
- Use aspect-square, aspect-video, or aspect-[ratio] Tailwind classes on containers to maintain consistent proportions
- Configure remotePatterns in next.config.js for all external image domains used in your project
- Add overflow-hidden to image containers to prevent content from breaking layout during loading
- Store static images in the /public folder and reference them with absolute paths like /image.jpg
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My V0-generated Next.js page has images that appear stretched or overflow their containers. The images use the next/image component. How do I fix the sizing to make images responsive with correct aspect ratios using fill and object-cover?
Frequently asked questions
Should I use the Next.js Image component or a regular img tag in V0?
Always use the Next.js Image component from next/image. It provides automatic optimization (WebP/AVIF conversion, responsive srcset), lazy loading, and layout shift prevention. V0 sometimes generates plain img tags — replace them with Image for better performance.
Why is my V0 image stretched even though I set width and height?
The width and height props define the rendered aspect ratio. If they do not match the source image's ratio, stretching occurs. Either adjust the values to match the source ratio, or use fill with object-cover to let the image crop proportionally.
How do I make images responsive in a V0 Next.js app?
Use the fill prop on the Image component, place it inside a relative-positioned container with responsive Tailwind classes (like w-full h-[300px] md:h-[500px]), and add object-cover. Include a sizes prop like "(max-width: 768px) 100vw, 50vw" for optimal srcset generation.
What does the sizes prop do on Next.js Image?
The sizes prop tells the browser how wide the image will be at different viewport sizes. Next.js uses this to generate the right srcset, so the browser downloads an appropriately sized image instead of always loading the largest one. Without it, Next.js defaults to 100vw.
How do I fix images from external URLs not loading in V0?
Next.js blocks external image domains by default. Add the domain to remotePatterns in next.config.js. For example, to allow Unsplash images, add { protocol: 'https', hostname: 'images.unsplash.com' } to the images.remotePatterns array.
Can RapidDev help optimize all the images in my V0 project?
Yes. RapidDev engineers can audit your entire V0 project to replace incorrect image implementations with optimized Next.js Image components, configure proper lazy loading, and set up responsive sizes for every breakpoint.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation