html - 图像填充整个容器区域，该区域继承其他内容的高度(无设置高度)

Question

我有一个带有 min-height: 100vh 的部分。然后该部分分为 2 部分，左侧部分包含链接列表，右侧部分显示具有 100% 高度的图像。

将鼠标悬停在这些链接上时，src右侧图像的 将会更改为显示与链接关联的图像(还有默认显示的图像)。

我正在努力解决的是如何使图像充满整个右侧<picture>容器不以任何方式扩展它？因此，图像要么是 100vh 的最小高度，要么与列表高度相同(如果超过 100vh)，我觉得我应该使用背景图像或其他东西，这是非常基本的，但我很难过!

这是我使用内联 CSS 的 HTML 结构:

<section style="min-height: 110vh; display: flex">
  <article style="min-width: 50%; border-right: 2px solid black;">
    <ul style="padding: 48px; gap: 32px; display: flex; flex-direction: column">
      <a href="">One</a>
      <a href="">Two</a>
      <a href="">Three</a>
      <a href="">Four</a>
      <a href="">Five</a>
    </ul>
  </article>

  <picture style="flex-grow: 1; object-fit: cover; background-color: aquamarine">
    <img src="https://flif.info/example-images/fish.png" alt="image" style="display: block">
  </picture>
</section>

Answer 1

将图片标签替换为

<div style="flex-grow:1; object-fit:cover; background:url(https://flif.info/example-images/fish.png) aquamarine no-repeat center center / contain;"></div>

请告诉我这是否有帮助:)