如何获得适合整个屏幕宽度的图像，并通过滚动

Question

我有一个2500x3500像素的图像，我希望将其作为我网站的背景图像。当我将背景大小设置为在css中覆盖时，

body {
    background-image: url(coolaid.jpg);
    background-size: cover;
}

图像正确缩放以覆盖网站，但下半部分因为是垂直图像而被切断。如何制作以便显示整个图像（根据图像使页面高度合适）？

Answer 1

＆＃13;

＆＃13;

body {
  background-image: url(http://beerhold.it/3500/2501);
  background-size: cover;
  background-position: 50% 50%;
  min-height: 100vh;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该可以解决问题：

body
{
    background-image: url(coolaid.jpg);
    background-size: cover;
    overflow: auto;
}

Answer 3

如果你想要完全看到图像，那么盒子的比例必须与图像的比例相匹配：

＆＃13;

＆＃13;

html {
  background:url(http://dummyimage.com/2500x3500/) no-repeat red;
  background-size:cover;
  height:140vw;
}

＆＃13;

＆＃13;

＆＃13;

我如何获得比率？

35/25 = 1.4

宽度为100vw。

min-height应为：

100vw x 1.4 = 140vw