默认情况下会稍微缩放显示“Yet Another React Lightbox”幻灯片图像

Question

我在我的网站上使用了这个“Yet Another React Lightbox”，我对此很满意，但我需要一点帮助。 我想默认显示稍微缩放的幻灯片图像（变换：scale（5）），任何人都可以帮助我如何做到这一点？

LightBox 演示 - https://yet-another-react-lightbox.com/examples/basic

LightBox 缩放插件的完整文档 - https://yet-another-react-lightbox.com/plugins/zoom

我的代码（一切正常，只是想默认显示稍微缩放的幻灯片图像）

import React, { useState } from "react";
import { IoMdImages } from "react-icons/io";
import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Video from "yet-another-react-lightbox/plugins/video";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

const PortfolioCard = (portfolioImages) => {

const [openLightBox, setopenLightBox] = useState(false);

  return (
<div className="open_gallery_button">
   <IoMdImages
      className="portfolio_gallery_btn"
      type="button"
      onClick={() => setopenLightBox(true)}
   />
   <Lightbox
      open={openLightBox}
      close={() => setopenLightBox(false)}
      plugins={[
      Captions,
      Fullscreen,
      Slideshow,
      Thumbnails,
      Video,
      Zoom,
      ]}

     slides={portfolioImages.galleryImages}
   />
</div>
);
};

Answer 1

    <Lightbox
      open={open}
      plugins={[Zoom,FullScreen]}
      close={() => setClose(false)}
      slides={[{ src: url }]}
      zoom={{
        scrollToZoom:true,
        maxZoomPixelRatio:5
      }}
    />

使用 maxZoomPixelRatio