如何降低旋转木马的高度

Question

前端开发对我来说是一种新体验，为此，我更喜欢将react作为goto库使用。现在我陷入了一个问题。  谁能指导我如何在不影响图片质量的情况下减小轮播图片的高度？

所需的输出：

这是我的代码，

import React from 'react';
import { Gallery, GalleryImage } from "react-gesture-gallery";
import ReactDOM from "react-dom";

const images = [
    "https://scontent.fkhi2-1.fna.fbcdn.net/v/t1.0-9/77017766_759244471260597_2356862208463339520_o.jpg?_nc_cat=109&_nc_ohc=UQbWRlHdFO4AQknJyvWGAbIif0SgcS5n49AOU3TRgnqOvh9cPMwZ-uY9A&_nc_ht=scontent.fkhi2-1.fna&oh=5bba2ef0d536b1d3752a12825cac2e88&oe=5E465DD2",
     "https://scontent.fkhi2-1.fna.fbcdn.net/v/t1.0-9/76727026_759558941229150_3910702859859001344_o.jpg?_nc_cat=104&_nc_ohc=jrAaYH_HT2MAQn8cSekMJqFSo9ZoXP5AQwjtn6JgZ1gDPDH1441VSIeFA&_nc_ht=scontent.fkhi2-1.fna&oh=536d5190623a82400bf8b7f11f71b7fb&oe=5E3EE66A"
  ];

  function Home() {
    const [index, setIndex] = React.useState(0);

    React.useEffect(() => {
      const timer = setInterval(() => {
        if (index === 4) {
          setIndex(0);
        } else {
          setIndex(prev => prev + 1);
        }
      }, 3000);
      return () => clearInterval(timer);
    }, [index]);

    return (
      <Gallery
        style={{
            background: "black",
            height: "100vh",
            width: "100vw"
        }}
        index={index}
        onRequestChange={i => {
          setIndex(i);
        }}
      >
        {images.map(image => (
          <GalleryImage objectFit="contain" key={image} src={image} />
        ))}
      </Gallery>
    );
  }

  const rootElement = document.getElementById("root");
  ReactDOM.render(<Home />, rootElement);

export default Home;