如何使用 Next.js 13 的 objectFit?

2023-12-29

In the 下一个/图像文档 https://nextjs.org/docs/api-reference/next/image在版本历史记录下,v13.0.0 的内容如下:

删除了布局、objectFit、objectPosition、lazyBoundary、lazyRoot 属性。

在下一个/图像文档下fill https://nextjs.org/docs/api-reference/next/image#fill文档指出我们可以设置对象适合object-fit: "contain"或者替代地object-fit: "cover"。我无法使用以下代码设置对象适合覆盖:

<div className="relative">
  <Image
      src=""
      alt=""
      fill={true}
      layout="fill"
      object-fit="cover"
    />
</div>

一、如何实现对象匹配 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit与 Next.js 13 一起使用吗?


NextJS Image 组件现在支持 style 属性,所以我相信这是正确的答案:

<div style={{position:"relative"}}>
  <Image
      src={source}
      alt=""
      fill
      style={{objectFit:"cover"}}
    />
</div>

父容器是相对定位的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Next.js 13 的 objectFit? 的相关文章

  • CSS - 将文本保留在图像下方

    我正在尝试创建一个简单的图片库 有人告诉我使用 float left 但是当我这样做时 页脚中的所有文本都会射到第一张图像 我已经搜索了大约一个小时试图找到解决方案 但我找不到任何东西 我尝试过使用边距 边框 不同的对齐方式和各种不同的小东
  • 同时重新排序和旋转图像的高效方法

    为了快速加载 jpeg 我为turbojpeg 实现了一个 mex wrapper 以有效地将 大 jpeg 读入 MATLAB 对于 4000x3000px 的图像 实际解码只需要大约 120 毫秒 而不是 5 毫秒 然而 像素顺序是 R
  • PHP - 从图像创建一张图像

    我有 n 张图像 想用 php 代码创建一张 我使用 imagecopymerge 但无法成功 请举一些例子 Code numberOfImages 3 x 940 y 420 background imagecreatetruecolor
  • 我应该如何使用 jcrop 在客户端裁剪图像并上传?

    我正在开发一个包含文件上传 HTML 控件的组件 在使用文件上传元素选择图像后 该图像将呈现在 HTML5 Canvas 元素上 这是带有示例代码的 JSFiddle https jsfiddle net govi20 spmc7ymp h
  • 生产中未使用快速会话设置 Cookie

    我的应用程序分为客户端和服务器 客户端是托管在 Now sh 上的前端 Nextjs 应用程序 服务器是使用 Express 创建并托管在 Heroku 上的后端 因此域是 client app now sh 和 server app he
  • 如何在 Python 中将图像分割成多个部分

    我正在尝试使用 PIL 将一张照片分成多块 def crop Path input height width i k x y page im Image open input imgwidth im size 0 imgheight im
  • 将远程和本地图像与 next/image 一起使用

    我正在尝试使用next image加载本地图像以及远程图像 我有我的本地图像public assets images以及AWS S3中的远程图像 我想在上传图像之前使用占位符图像 来自本地 然后在上传后将其替换为远程图像 我已经添加了dom
  • 图像未显示在从 HTML 创建的 PDF 上

    我想动态创建 PDF 这意味着我将从 Google Drive 获取文件 然后将它们放入 HTML 代码中 并尝试从中创建 PDF 一切工作正常 除了图像没有显示 我现在正在做的是 从 HTML 字符串创建 HtmlOutput 获取该 H
  • java设置图像的分辨率和打印尺寸

    我编写了一个程序 生成一个 BufferedImage 以显示在屏幕上 然后打印 图像的一部分包括 1 像素宽的网格线 即 一行为1个像素 行与行之间大约有10个像素 由于屏幕分辨率的原因 图像显示得比这大得多 每行有几个像素 我想将其绘制
  • 从 imread 返回的 ndims

    我正在从文件夹中选取图像 尺寸为128 128 为此 我使用以下代码行 FileName PathName uigetfile jpg Select the Cover Image file fullfile PathName FileNa
  • 如何使用javascript检查图像url是否为404

    使用案例 当 src 不为空并且 alt 标签不为空时 则显示 src 的图像 然后检查 src 图片 url 不是 404 当 src 为空且 alt 不为空时 显示名字的图像 当 src 和 alt 为空时显示默认图像 HTML img
  • 仅获取图像中的外部轮廓

    我有这段代码 可以在图像中绘制轮廓 但我只需要外部轮廓 import cv2 import numpy as np camino C Users Usuario Documents Deteccion de Objetos 123 jpg
  • 文章中的内联图像和标题 - 使标题的宽度与图像的宽度一致

    这是我的代码 div class image img src image jpg alt Image description p class caption This is the image caption p div 这是我的 CSS
  • 使用无图像按钮有哪些优点?

    讨论关于这个答案 https stackoverflow com questions 520640 how can i use googles new imageless button how could i reverse enginee
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 如何使网页中出现的图标闪烁/闪烁

    几天前我开始研究高级java 我知道太晚了 我被困在使图标 出现在任务栏上 闪烁的特定任务上 这种闪烁应该根据特定条件发生 这意味着可以使用以下方法来实现javascript 我已经搜索了一段时间了 但是有没有办法让图标每隔 1 秒左右出现
  • PIL.Image.open和tf.image.decode_jpeg返回值的区别

    我使用 PIL Image open 和 tf image decode jpeg 将图像文件解析为数组 但发现PIL Image open 中的像素值与tf image decode jpeg不一样 为什么会出现这种情况 Thanks 代
  • Javascript - 检测 Youtube 默认缩略图

    有什么方法可以查看 Youtube 缩略图是否真的存在 或者 Youtube 只是用默认缩略图替换了它 例如 没有此缩略图的视频 http img youtube com vi G75WApUdYJ4 maxresdefault jpg h
  • JavaFX:将像素写入 PixelWriter 的最快方法

    我正在寻找最快的方式来写入像素javafx scene image Image 写信给BufferedImage的后备数组要快得多 至少在我制作的测试图像上 只花了大约 20 毫秒BufferedImage WritableImage另一方
  • PIL - 需要抖动,但限制调色板会导致问题

    我是 Python 新手 正在尝试使用 PIL 来执行 Arduino 项目所需的解析任务 这个问题涉及到Image convert 方法以及调色板 抖动等选项 我有一些硬件能够一次仅显示 16 种颜色的图像 但它们可以指定为 RGB 三元

随机推荐