javascript - 如何根据 HTML CSS JavaScript 中的纵横比调整高度或宽度？

Question

我一直在寻找答案很长一段时间，但似乎找不到合适的问题。

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

我想将此图片放置在屏幕中央并采用全宽或全高，这样所有图片都可以在任何纵横比或任何大小的浏览器窗口上看到。

我附上一个 sketch为了解释我想要实现的目标。在屏幕 1 上有一个宽屏幕，图像应该适合窗口的高度并且水平居中，而在第二个屏幕上有一个纵向(或任何不超过 4:3 的宽度) View ，在这种情况下它应该是垂直的居中并适合父级的宽度。

---

比方说，现在我在这张图片上有一个 myImg 类
.myImg { 宽度:100%；高度:自动； }

此方法的问题是它总是适合宽度，如果屏幕(或窗口)的纵横比大于 4:3(例如 16:9)，则某些图像将不会显示在屏幕上。

在解决方案中，我更喜欢纯 CSS，但如果需要，一些 (Vanilla) JS 也可以。

Answer 1

将此添加到您的 .myImg 类并将图像设置为 div 或类似内容上的背景图像:

background-size: cover;