Nuxt/Image - fit="inside/outside"有什么区别

Question

这些键有什么区别，如per documentation

“内部：保持宽高比，将图像调整为尽可能大，同时确保其尺寸小于或等于指定的尺寸。”

“外部：保持宽高比，将图像调整为尽可能小，同时确保其尺寸大于或等于指定的尺寸。”

应该怎么理解呢？让我们参考

"cover：（默认）保持宽高比，确保图像覆盖两个提供的尺寸 cropping/clipping 以适应"

这不是说图像被调整大小了吗？内部和外部的用例是什么？

Answer 1

解决这个问题的最简单方法可能是去 Unplash 并选择一张这样的肖像照片：https://unsplash.com/photos/wQe5nEi5zG4

将其放入 Nuxt 的 /static 目录中，并使用以下内容将其加载到您的页面中

<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>

然后，您会看到 cover 主要是 object-fit="cover"，正如 on MDN 所解释的那样。

div.

的较小尺寸会以某种方式裁剪它

其他 2 个更难理解，但如果您使用开发工具看到实际结果，就会更容易理解。

在network选项卡中，可以看到大小相差很大（图片的顺序是守恒的）。

如果您转到 Elements 选项卡并检查那里的值，您将能够看到图像将：

keep it's aspect ratio
resize itself to be at MAXIMUM 200px wide（最少出自 800 和 200)

因此，为什么最终的图像尺寸（内部尺寸）为 133 x 200px。

另一个会相反：

keep it's aspect ratio
resize itself to be at MINIMUM at 800px wide（800 和 200 中的最大值）。

这张会更高清，800 x 1200px。

Nuxt/Image - fit="inside/outside"有什么区别

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

javascript

image

image-optimization

vue.js

nuxt.js