如何确保高度不超过父的高度，同时还要维护图像的纵横比

Question

我有一个宽度应尽可能大的图像，我希望不超过父母的高度，同时还保持纵横比的高度为16：9。目前的问题是，它可以很好地工作，直到屏幕尺寸为1591px，如果大于该屏幕大小，高度就超过了，并且出现了垂直滚动条。我不想要那种行为。我该如何实现？

Answer 1

Update ：从一个问题中假定的原始答案是图像是HTML IMG。解决方案是将宽度设置为[其容器的100％]，并将高度设置为70VH，并使用对象拟合。

但是，这不是IMG，而是画布。

已知所需的纵横比为16/9。因此，该段将最大宽度设置为100％（任何是容器的）和最大高点为70VH。

这样，永远不会有任何溢出，画布将在这些约束中尽可能大。

body {
  width: 100vw;
  margin: 0;
}

canvas {
  max-width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  background: green;
}

<canvas width="1600" height="900"></canvas>

Answer 2

由于溢出而出现滚动条，您可以

1. 使用“溢出：隐藏；”使用

body{
    overflow: hidden;
}

2. 2件事。您可以使用最大宽度来确定元素的最大宽度，并将其设置在

我希望它有用的两个元素上