javascript - 如何在页面中尽可能大地显示整个图像(无滚动)保持其纵横比

Question

我有一个包含两列的页面布局。第一个是 80% 宽度，另一个是 20%。我想在第一列中显示尽可能大的图像。问题是如果我使用 width:100%;和高度:自动；对于这张图片，我调整了我的窗口大小，直到我得到一个更短的窗口，该窗口隐藏了图像的底部。

问题:

期望的行为:

我知道我无法同时获得 100% 的高度和宽度以保持纵横比，但我想知道在每种情况下您会怎么做才能使该图像尽可能大？

理想情况下，它会在垂直屏幕上使用 width:100% ，在水平屏幕上使用 height:100% (在调整窗口大小时从一个选项切换到另一个选项)但不确定哪个是最好的选择。也许检查窗口高度是否低于图像，然后更改图像尺寸？

你会怎么做？

Answer 1

    body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

试试这段代码。它覆盖了整个屏幕部分。您无法在不同的纵横比下获得相同的吞吐量，但 background-size:cover 提供了最好的支持。如果您想深入挖掘，可以使用具有多个 src 属性的图片元素或使用 media queries for different aspect ratios .