Question

有没有办法让网站100％流畅？

在中，无论浏览器窗口的大小如何，都要使用图像边缘到边缘填充背景。此外，随着浏览器窗口的更改而不必保留纵横比，请将其调整为更大或更小。 div和字体大小内的图像显然应相应调整大小并保持相同的空白区域，以便页面在800x600到4K Ultra HD的屏幕上显示完全相同的内容，这是超越任何类型的垂直滚动条的想法。让我们暂时忘掉手机和平板电脑。

我为背景尝试了什么：

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%"/>

他们似乎都无法对宽度和高度做出反应。看起来你必须在一个或另一个之间做出选择。

对于font-size，我会使用vw并希望最好。

Answer 1

你想要

background-size:100% 100%;

Answer 2

您应该查看flex模型：https://philipwalton.github.io/solved-by-flexbox/demos/grids/

CSS 100％流动网站

2 个答案: