Search code examples
javascriptimagevue.jsnuxt.jsimage-optimization

Nuxt/Image - what is the difference in fit="inside/outside"

What is the difference between those keys, as per documentation

"inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified."

"outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified."

How should I understand it? Lets say in reference to

"cover: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit"

Which does not say that the image is resized, is it not than? And what is the use case for inside and outside?

Solution

  • The simplest approach to solve this is probably to go Unplash and pick a portrait photo like this one: https://unsplash.com/photos/wQe5nEi5zG4

    Bring it into the /static directory of Nuxt and load this in your page with the following

    <template>
  <div>
    <nuxt-img fit="cover" src="/flower.jpg" width="800" height="200" />
    <nuxt-img fit="inside" src="/flower.jpg" width="800" height="200" />
    <nuxt-img fit="outside" src="/flower.jpg" width="800" height="200" />
  </div>
</template>

<style scoped>
img {
  border: 2px solid red;
}
</style>

    Then, you'll see that cover is mainly object-fit="cover" as explained on MDN.

    It will be quite somehow cropped by the smaller size of the div.

    enter image description here

    The other 2 are a bit more tricky to understand but it's easier if you see the actual result with the devtools.

    In the network tab, you can see that the size is quite different (the order of the images is conserved).

    enter image description here

    If you go to the Elements tab and check the value there, you'll be able to see that the image will:

    • keep it's aspect ratio
    • resize itself to be at MAXIMUM 200px wide (minimum out from 800 and 200)

    Hence why the final's image size (intrinsic size) is 133 x 200px.

    enter image description here

    The other one will be the opposite:

    • keep it's aspect ratio
    • resize itself to be at MINIMUM at 800px wide (maximum out from 800 and 200).

    This one will be quite more HD, with 800 x 1200px.

    enter image description here