CSS 100% fluid网站

Question

有没有办法让一个网站100%流畅？

如中所示，无论浏览器窗口的大小如何，都可以用图像逐边填充背景。此外，让它随着浏览器窗口的变化而调整大小，而不需要保留宽高比。divs和字体大小中的图像显然应该相应地调整大小，并保持相同数量的空白，以便页面在800x600到4K超高清的屏幕上显示完全相同的内容，这是在任何类型的垂直滚动条之上的想法。让我们暂时忘掉移动设备和平板电脑。

我尝试过的背景知识：

body {
background-image:  url(./Si0rPf7.png);
background-size:   contain;                      
background-repeat: no-repeat;
background-position: center center;            
}

只要图像的纵横比保持不变，它就会适合背景，当它改变的时候，你会看到两边都有空格。如果覆盖而不是包含，图像将被裁剪，如果我们想要向每个人显示我们的整个背景，即使我们必须拉伸它，这也是不可取的。

现在，对于img src，我已经用两种方法成功了一半：

.image_1 {width: 100%; height: auto;}

和

  <img src="img/image_1.jpg" width="100%"/>

它们似乎都不能同时对宽度和高度做出反应。看起来你得在两者之间做出选择。

对于字体大小，我只会使用大众，希望是最好的。

Answer 1

你想要的

background-size:100% 100%;

Answer 2

您应该研究一下flex模型：https://philipwalton.github.io/solved-by-flexbox/demos/grids/