我的页面上有一个div占据了视口宽度的三分之二和高度的95%。我计划让图像占据整个div，纵横比为21：9。我将div设置为溢出：隐藏;这意味着左右部分被切掉。这工作得很好，直到你进入高宽比如32：9的屏幕，其中div比图像宽。我想知道是否有一个干净的解决方案，使图像的顶部/底部切掉时，发生这种情况。

HTML:

<figure>
    <a
        href="images/slideshow/00_stellaris_acot.png"
        data-lightbox="ui_overhaul_dynamic"
    >
        <img src="images/slideshow_source/00_stellaris_acot.png" alt="" />
    </a>
    <a
        href="images/slideshow/01_delta.png"
        data-lightbox="ui_overhaul_dynamic"
    >
    </a>
    <a
        href="images/slideshow/02_alpha.png"
        data-lightbox="ui_overhaul_dynamic"
    >
    </a>
</figure>

CSS:

body > main > section > figure {
  background-color: rgb(10, 12, 54);
  border-style: none solid none none;
  overflow: hidden;
}

body > main > section > figure > a > img {
  height: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}