圖像不受父 div 高度的限制，只有寬度

Question

我的 gatsby 圖像正確地受父 div 的寬度約束，但不受 height 屬性的約束。

圖片的寬度不會超過父 div（粉色邊框）：

但是，如果我增加瀏覽器大小，圖像的高度會超出父 div（粉紅色邊框）：

下面是代碼 - 我該如何解決這個問題？ 提前致謝！

    <div 
  style={{
    display: `flex`,
    justifyContent: `flex-start`,
    borderStyle: `solid`,
    borderColor: `blue`,
    height:`70vh`,
    width:`100%`,
    marginTop: `3rem`
}}>
  <div className="imageContainer" 
    style={{
      width:`50%`,
      height:`100%`,
      borderStyle: `solid`,
      borderColor: `pink`,
  }}>
    <StaticImage
      src="../images/about.jpg"
      layout="constrained"
      width={1200}
      height={1100}
      quality={90}
      formats={["auto", "webp", "avif"]}
      alt="home image"
      style={{ 
        marginBottom: 0,
      }}
    />
  </div>

</div>

Answer 1

那么你是否希望粉紅色邊框內的圖像始終遵循粉紅色邊框div的寬度和高度？

如果是的話，我想你可以用下面的這個 css 來實現它，將它添加到 StaticImage className 道具。

.static-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}