图像不受父 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;
}