Fill Parent Container and Reduce Image Resolution with Next/Image

Fill parent container and reduce image resolution with next/image

You can configure the deviceSizes property in next.config.js to match the breakpoints used in your app, as those are used to generate the next/image's srcsets, and serve the correctly sized image.

If you know the expected device widths of your users, you can specify
a list of device width breakpoints using the deviceSizes property in
next.config.js. These widths are used when the next/image component
uses layout="responsive" or layout="fill" to ensure the correct image
is served for user's device.

The above should be paired with the sizes attribute on the next/image if the rendered image takes up less than the full viewport width.

If you are using layout="fill", layout="responsive", or layout="raw"
it's important to assign sizes for any image that takes up less than
the full viewport width.

For example, when the parent element will constrain the image to
always be less than half the viewport width, use sizes="50vw". Without
sizes, the image will be sent at twice the necessary resolution,
decreasing performance.

---

As an example, let's assume your app uses the following device breakpoints [320, 640, 1024, 1280, 1920], and you're rendering a 240x240 image.

Update the deviceSizes property to match the breakpoints:

// next.config.js
module.exports = {
    images: {
        deviceSizes: [320, 640, 1024, 1280, 1920],
        // Other existing `images` configs
    },
    // Other existing configs
}

Then set the sizes property on the next/image to suggest the ideal image size.

<div style={{ position: 'relative', width: 240, height: 240 }}>
    <Image
        src="<image-url>"
        layout="fill"
        sizes="50vw"
    />
</div>

You should adjust the above values to better fit your use case.

couldn't reduce the size of image in next/image component

In your example, in the sandbox, you are using
layout="fill"

This will overwrite your size properties to fill the entire parent.
Remove that property and see that your width and height options are accepted.

https://codesandbox.io/s/cave-forked-egtko?file=/components/Header.js

How to make NextJS Image component 100% height and width for its parent div?

Ok, I see that you want the image to take the width and height of its parent element, you can just use layout="fill" instead of responsive, which causes the image to expand to fill its parent element.

Something like this:

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

Next.JS Image `layout='fill'` is broken

The wrapping div should have position: relative:

export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px', position: 'relative'}}>
        <Image src={"/i.png"} layout='fill'/>
      </div>
    </div>
  )
}

This is a consequence of how position: absolute works. It's containing block will be the nearest ancestor element that has any position value but static (the initial value).

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

---

Related Topics