添加以下CSS：

@media only screen and (max-width: 576px) { // CSS will apply to mobile only
  .card-body {
    height: 200px; // Make all cards the same height
  }

  img {
    width: 100%; // Make the image full window width
    max-height: 150px; // But not higher than 150px
    object-fit: contain; // Preserve image aspect ratio
  }
}

参见live demo。

App.js

import "./styles.css";
import img1 from "./salmon3.png";
import img2 from "./rib.png";

export default function App() {
  return (
    <div className="pb-120 desert-menu-section">
      <div className="container-fluid">
        <div className="row g-3 g-lg-4">
          {data?.map((item, i) => (
            <div
              className="col-sm-6 col-lg-3 d-flex align-items-stretch"
              key={i}
            >
              <div className="card-body offer-item text-center">
                <div className="text-center">
                  <img src={item.img} alt="" />
                </div>
                <h4 className="title">
                  <p to="/productDetails" state={{ ime: item.title }}>
                    {item.title}
                  </p>
                </h4>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const data = [
  {
    img: img1,
    title: "Juicy Beef Burger Meal"
  },
  {
    img: img2,
    title: "Choko Milkshake From Heaven"
  }
];

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  position: relative;
  z-index: 1;
}

@include breakpoint(xl) {
  .container {
    max-width: 1260px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@include breakpoint(max-lg) {
  .container,
  .container-fluid {
    padding-inline: 30px;
  }
}

.pb-120 {
  padding-bottom: 120px;
  @include breakpoint(max-lg) {
    padding-bottom: 90px;
  }
}

@include breakpoint(max-md) {
  .desert-menu-section {
    padding-top: 40px;
  }

  .trending-menu-section {
    padding-top: 140px;
  }

  .layer-section {
    padding: 140px 0 130px;
    .btn-base {
      font-size: 18px;
      padding: 10px 45px;
    }
  }
}

/* Added */
@media only screen and (max-width: 576px) {
  .card-body {
    border: 1px solid red;
    height: 200px;
  }

  img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
  }
}

您可以将每一行（col-sm-6col-lg-3d-flex）设置为一个flex容器，然后应用align-items：拉伸，这是Flex容器的默认行为。这会使每张卡片（在此上下文中为flex项）拉伸到行中最高项的高度。因为卡片网格中的每一行都是一个新的flex容器，这确保了每一行中的所有卡片都具有相同的高度。但是，它不能确保不同行中的卡片具有相同的高度。

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="row g-3 g-lg-4">
            {data?.map((item, i) => (
                <div className="col-sm-6 col-lg-3 d-flex align-items-stretch" key={i}>
                    <div className={`card-body offer-item text-center d-flex flex-column`}>
                        <div className="text-center">
                            <img src={item.slika} alt="" />
                        </div>
                        <h4 className="title mt-auto">
                            <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                        </h4>
                    </div>
                </div>
            ))}
        </div>
    </div>
</div>