Next.js中图片超出容器高度问题求助

我最近碰到个布局难题：我给容器设置了固定的440px高度，本来期望里面的图片和其他元素都能乖乖适配这个高度，但实际运行起来图片直接超出容器范围了，完全没达到预期效果。

下面是我的组件代码和对应的样式：

组件代码 #

import React from "react";
import style from "./TourGalery.module.scss";
import Image from "next/image";

interface Props {
  images?: React.ReactNode[];
}

const TourGalery = (props: Props) => {
  return (
    <div className={style["galery"]}>
      <div className={style["main-image"]}>
        <Image 
          src={props.images && props.images[0]} 
          alt="Picture of the author" 
          className={style["galery-image"]} 
        />
      </div>
      <div className={style["other-images"]}>
        {props.images?.slice(1, 3).map((img, index) => {
          return (
            <Image 
              key={index} 
              src={img} 
              alt="Picture of the author" 
              className={style["galery-image"]} 
            />
          );
        })}
        {props.images && props.images?.length > 3 ? (
          <div className={style["image-count"]}>
            <h1>+{props.images?.length - 3}</h1>
          </div>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default TourGalery;

SCSS样式代码 #

.galery-image {
  border-radius: 16px;
  width: 100%;
}

.galery {
  height: 440px;
  display: flex;
  width: 100%;

  .main-image {
    width: 70%;
    height: 100%;
    border-radius: 16px;
    margin-right: 8px;
  }

  .other-images {
    width: 30%;
    height: 100%;

    .image-count {
      padding: 62px 0px;
      text-align: center;
      border: 1px solid #d6dde0;
      border-radius: 12px;

      h1 {
        font-weight: 600;
        font-size: 16px;
        color: #989ea0;
      }
    }
  }
}

我理想中的组件效果是图片能自适应容器高度，不会出现超出的情况，但目前完全不是这样。我试过给图片设固定尺寸，结果图片直接变形了；也折腾过Next.js Image组件的layout参数，可一点用都没有。有没有大佬能帮我解决这个问题呀？

备注：内容来源于stack exchange，提问作者Salivan