Question

我不明白为什么这个page从图像开始压缩扩展到右视口大小。我没有在css上看到任何会使它表现得像那样的东西。

我确实有这个脚本，它基本上确保背景图像的画布保持其宽高比，无论屏幕大小。但我不确定这是否会导致问题。

提前致谢！

Answer 1

您可以尝试使用

（文档）$。就绪（）

而不是load（）函数。由于load（）函数仅在加载整个页面后才运行，我想这对你造成了问题。

然而，当HTML DOM准备就绪时，$（document）.ready（）函数会运行。

Answer 2

你可以用一个非常简单的CSS技巧来实现同样的目标：

<div class="ratio"></div>

.ratio{
  background-color: red;
  /* Setting background colour to demonstrate that the image fills the container - not needed or a requirement for the technique to work */
  background-image: url(https://c1.staticflickr.com/4/3017/3048731033_1f1fce7744_b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  /* The "cover" value makes the image fill the background by it's longest axis and clips the remainder - useful for when you have images with different aspect ratios, but want to keep the container's aspect ratio */
  height: 0;
  padding-bottom: 50%;
  width: 100%;
}

通过将容器的高度设置为0并将填充底部（或顶部）设置为50％（现在将是容器宽度的50％），您的容器将始终具有2的宽高比： 1。

See this codepen demo.

如果需要，您还可以使用内嵌图像，但是您需要一个额外的容器和一些定位技巧。

在页面加载时，背景图像开始挤压然后展开

2 个答案: