How to use Image component in Next.js with unknown width and height

by

Yeah, you could use it with the layout=fill option you mentioned.

On this case, you’re gonna need to set an “aspect ratio” for your images

<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" // Scale your image down to fit into the container
  />
</div>

You can use objectFit="cover" too and it’ll scale your image up to fill all the container.

The downside of this approach is that is gonna be attached to the width you specify, it could be relative such as “100%” or absolute e.g. “10rem”, but there’s no way to set like an auto width and height based on the size of your image, or at least no yet.

More Related Contents:

  1. Image comparison – fast algorithm
  2. Formula to determine perceived brightness of RGB color
  3. How to generate a Dockerfile from an image?
  4. How do you stretch an image to fill a while keeping the image’s aspect-ratio?
  5. Detection of coins (and fit ellipses) on an image
  6. CV – Extract differences between two images
  7. How to upload, display and save images using node.js and express [closed]
  8. Gmail’s new image caching is breaking image links in newsletter
  9. How to set size for local image using knitr for markdown?
  10. Swift2 retrieving images from Firebase
  11. SVG. Reverse image using css. Keep image at the same place
  12. Algorithm to detect presence of text on image
  13. Can I set a users profile image using the Facebook API?
  14. html5: copy a canvas to image and back
  15. How can I add an image to all pages of my PDF?
  16. Find local maxima in grayscale image using OpenCV
  17. Multiple images display (slideshow) on wpInstalling Page under ProgressGauge bar in Inno Setup
  18. How can I insert an image with iTextSharp in an existing PDF?
  19. Export pictures from excel file into jpg using VBA
  20. LSB-DCT based Image steganography
  21. Node Express sending image files as API response
  22. How do I display local image in markdown?
  23. Qt jpg image display
  24. Image Warping – Bulge Effect Algorithm
  25. JPG vs. JPEG image formats
  26. What is the difference between “JPG” / “JPEG” / “PNG” / “BMP” / “GIF” / “TIFF” Image?
  27. Algorithm challenge: Generate color scheme from an image
  28. Is it OK to HTTP redirect images?
  29. How to determine if a photo is corrupted?
  30. Next Image not taking class properties

Leave a Comment