在反应流畅的中心模式设置中，某些图像没有全屏显示

如何解决在反应流畅的中心模式设置中，某些图像没有全屏显示

我一直在尝试使用 centermode 设置使 react-slick 工作。 它在某些页面上可以完美运行，但在其他页面上，它会将画布视为较小的宽度进行计算，从而导致屏幕右侧出现空白区域。

例如：working properly

not working properly

欢迎提出任何建议。

import { Component } from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import httpsWithQuality from '../../utils/httpsWithQuality';
import dynamic from 'next/dynamic';
const LightBoxFullScreen = dynamic(() => import('./LightBox'));

const Div = styled.div`
  img {
    width: 995px;
    height: 400px;
  }
  @media screen and (min-width: 568px) {
    .slick-slide {
      margin-left: 2.5px;
      margin-right: 2.5px;
    }
  }

  height: 400px;

  background: #e9e9e988;

  .slick-slider,.slick-track,.slick-list,.slick-slide,.slick-track {
    height: 400px;
    max-height: 400px;
  }

  img {
    height: 400px;
    max-height: 400px;
    object-fit: cover;
    width: 100%;
    /* width: 1060px; */
    background: #e9e9e988;
  }
  @media screen and (max-width: 768px) {
    height: 300px;
    .slick-slider,img {
      height: 300px;
    }
  }
  @media screen and (max-width: 568px) {
    height: 250px;
    .slick-slider,img {
      height: 250px;
    }
  }

  .relative {
    position: relative;
  }

  button.view-all {
    position: relative;
    width: 100px;
    left: 107px;

    top: 8px;
    border: none;
    color: #ababab;
    background: transparent;
    font-weight: bold;
    &:focus {
      outline: none;
    }
    &:hover {
      color: black;
    }
  }
  .view-all-container {
    width: 100%;
    max-width: 314px;
    height: 38px;

    background: #fff;
    Box-shadow: 0 2px 15px #0000001f;
    position: absolute;

    left: calc(50vw - 157px);
    top: -15px;

    border-radius: 26px;
  }

  .cursor-pointer {
    cursor: pointer;
  }
`;

const ButtonR = styled.button`
  position: absolute;
  right: calc(50vw - 150px);
  z-index: 1;
  bottom: -15px;
  font-weight: bold;
  color: #ababab;
  border: none;
  background-color: transparent;
  &:focus {
    outline: none;
  }
  &:hover {
    color: black;
  }
`;
const ButtonL = styled.button`
  position: absolute;
  left: calc(50vw - 150px);
  z-index: 1;
  bottom: -15px;
  font-weight: bold;
  color: #ababab;
  border: none;
  background-color: transparent;
  &:focus {
    outline: none;
  }
  &:hover {
    color: black;
  }
  margin-top: 8px;
`;

export default class Carousel extends Component {
  state = {
    show: false,currentIndex: 1,};

  render() {
    const SliderRight = ({ onClick }) => (
      <ButtonR type="button" onClick={onClick}>
        Next <i className="fa fa-chevron-right"></i>
      </ButtonR>
    );
    const SliderLeft = ({ onClick }) => (
      <ButtonL type="button" onClick={onClick}>
        <i className="fa fa-chevron-left"></i> Prev
      </ButtonL>
    );

    const settings = {
      dots: false,lazyLoad: true,infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,initialSlide: 1,autoplay: true,autoplaySpeed: 6000,nextArrow: <SliderRight text="N" to="right" />,prevArrow: <SliderLeft text="P" to="left" />,centerMode: true,centerPadding: '20%',beforeChange: (prev,next) => {
        this.setState({ currentIndex: next });
      },responsive: [
        {
          breakpoint: 1300,settings: {
            slidesToShow: 1,},{
          breakpoint: 1200,centerPadding: '25%',{
          breakpoint: 768,centerPadding: '15%',{
          breakpoint: 568,centerMode: false,centerPadding: '0',],};
    return (
      <>
        <Div>
          <Slider {...settings} className="relative">
            {this.props.urls.map((image,id) => (
              <div
                key={'carousel#' + id}
                className="cursor-pointer"
                onClick={() => this.setState({ show: true })}>
                <picture>
                  <source
                    media="(min-width: 992px)"
                    srcSet={httpsWithQuality(image.image_url,600)}
                    height="400"
                  />

                  <source
                    media="(max-width: 568px)"
                    srcSet={httpsWithQuality(image.image_url,300)}
                    height="250"
                  />
                  <img
                    src={httpsWithQuality(image.image_url,450)}
                    alt={image.filename}
                    // className="img-responsive"
                    height="300"
                  />
                </picture>
              </div>
            ))}
          </Slider>
          <div className="relative">
            <div className="view-all-container">
              <button
                className="view-all"
                onClick={() => this.setState({ show: true })}>
                View All
              </button>
            </div>
          </div>
        </Div>
        {this.state.show && (
          <LightBoxFullScreen
            close={() => this.setState({ show: false })}
            images={this.props.urls}
            photoIndex={this.state.currentIndex}
          />
        )}
      </>
    );
  }
}