图片不受父 div 高度限制，仅受宽度限制

Question

我的 gatsby 图像正确地受到父级 div 宽度的约束，但不受高度属性.

的约束

图片宽度不会超过父级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;
}

图片不受父 div 高度限制，仅受宽度限制

Image not constrained by parent div height, only width

css

reactjs

styled-components