在HTML CSS JavaScript中，如何根据纵横比调整高度或宽度？

我一直在寻找一个答案已经有一段时间了，似乎我就是找不到合适的问题来问

我有一张尺寸为1024x768的图像，这意味着纵横比是4:3

我想把这张图片放在屏幕的中央，可以是全宽也可以是全高，这样所有的图片都可以在任何纵横比或任何大小的浏览器窗口上看到

为了说明我想要达到的目标，我附上了一份清单。在屏幕1上有一个宽屏幕，图像应适合窗口的高度和水平居中，而在第二个屏幕上有一个纵向（或任何宽度不超过4:3的）视图，在这种情况下，它应垂直居中并适合父屏幕的宽度

---

现在我在这张图片上有一个myImg类

.myImg{宽度：100%；高度：自动；}

这种方法的问题是它总是适合宽度，如果屏幕（或窗口）的纵横比大于4:3（例如16:9），一些图像将不会显示在屏幕上

---

在解决方案中，我更喜欢纯CSS，但如果必要，一些（普通的）JS也可以。

将其添加到.myImg类中，并将图像设置为div或类似文件上的背景图像：

background-size: cover;

把我的名字改成

.myimg
{
    position: absolute;
    max-width: 100%;
    top: 10%;
    left: 10%;
}

.myimg:empty
{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

并添加在css的顶部，以使其具有响应性

@media screen and (orientation: portrait) {
  .myimg { max-width: 100%; }
}

@media screen and (orientation: landscape) {
  .myimg { max-height: 100%; }
}

---

您正在查找

max width

（）和

max height

（）CSS属性。尝试将它们设置为视口值，如下所示：

img {
    max-width: 100vw;
    max-height: 100vh;
}

下面是一个示例片段：

html，正文{
保证金：0；
}
img{
最大宽度：100vw；
最大高度：100vh；
保证金：0自动；
显示：块；
}