@11tyrocks/eleventy-plugin-objectfit-focalpoint 中文文档教程

Question

Eleventy Plugin: Object-Fit Focal Point

一个 Eleventy Nunjucks 短代码，用于提供生成图像的 object-position 值的功能，以保持焦点在视野中。 使用实用程序测试结果。

此短代码与 CSS 属性 object-fit 结合使用，这使得 img 充当它自己的容器。 当分配了 cover 的值时，图像的行为类似于 background-size: cover。

不熟悉object-fit？ 查看我的 2 分钟免费书呆子视频>

短代码使用 sharp package resize API 用于使用 香农熵 确定图像的焦点。 然后，它根据图像的纵横比将计算出的点作为百分比应用为 object-position 的值。 调整图像容器大小时，焦点不太可能*被裁剪出视野。

为获得最佳效果，纵横比应与自然图像方向相似。 例如，对于 1024x768 的图像，5/3 比 600x1200 的图像有更好的结果。

* 熵是不完美的，您可能无法在每张图像上都达到预期的效果，尤其是在强光/暗区。

Usage

安装插件：

npm install @11tyrocks/eleventy-plugin-objectfit-focalpoint

然后，将其包含在您的 .eleventy.js 配置文件中：

const objectFitFocalPoint = require("@11tyrocks/eleventy-plugin-objectfit-focalpoint");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(objectFitFocalPoint);
};

Required Image Styles

为了使短代码完全正常工作，您需要为相关图像包含以下样式。 默认类是 image，可以通过在插件配置中将新字符串传递给 imageClasses 来更改。

.image {
  /* Required */
  object-fit: cover;

  /* Recommended but not required */
  display: block;
  max-width: 100%;

  /* Optional: Force images to fill their parent container's width */
  width: 100%;
}

Using the Shortcode

因为短代码是异步的，所以它只适用于 Nunjucks。 如果您通常使用 Markdown 编写，则可以将以下内容添加到您的 frontmatter 中以便能够同时使用两者：

templateEngineOverride: njk, md

要使用短代码，请传入图像路径以及可选的 width 和 height 值，或方面 ratio。

// Local file - must start with `/`
{% objectFitFocalPoint image="/img/my-image.png", ratio="4/3" %}

// External file - must begin with http or https
// ⚠️ Note that the extra processing may slow down your build
{% objectFitFocalPoint image="https://source.unsplash.com/0kCrlrs8gXg/700x900", width="400", height="300" %}

注意：建议始终传递宽度和高度，因为浏览器现在会在图像创建空间时创建空间根据从这些值创建的预期宽高比加载。 这有助于减少页面内容的跳跃，并提高您的Cumulative Layout Shift Core Web Vitals 分数。

Config Options

Option	Type	Default
defaultAspectRatio	string	'5/3'
defaultWidth	int	800
defaultHeight	int	480
imageClasses	string	'image'
siteInputPath	string	'.'

如果您在 Eleventy 配置中自定义了输入目录，则至少可能需要更新 siteInputPath。 此值不应以/ 结尾。

这是一个示例，如果您的输入目录是 src：

eleventyConfig.addPlugin(objectFitFocalPoint, {
  siteInputPath: "./src",
});

New to Eleventy?

查看我在 11ty.Rocks 的其他资源