0

我使用下面的 URL 来设置背景图片：

https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png

body { background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png"); 
background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3A3F50;
}

有了这个，我可以在浏览器中正确设置背景，但是如果我在移动设备中看到相同的屏幕，我将无法看到完整的图像，因为它不是根据屏幕尺寸设置或渲染的。

有没有办法在浏览器和移动设备中显示相同的图像，或者我可以将上述图像最小化到某个尺寸并在移动设备上显示？

4

2 回答 2

1

如果百分比（%）不起作用，您可以使用 vh（视口高度）和 vw（视口宽度）来设置背景大小

body {
 background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
 background-size: 100vw 100vh;
}

你可以在这里预览

于 2020-04-04T10:12:04.167 回答
1

如果您希望图像在移动屏幕上同时放大和缩小，请将 width 属性设置为css自动：100%height

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

如果您希望图像在必要时缩小，但永远不要放大到大于其原始尺寸，请使用max-width: 100%：

.image_name {
  max-width: 100%;
  height: auto;
}

如果要将响应式图像限制为最大尺寸，请使用 max-width 属性以及您选择的像素值：

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

在您的情况下，您的图像似乎在正文标签内，在第一种情况下

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

这将跨越整个页面的图像，但是对于您的图像https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png，尺寸似乎更小，因此图像可能会变得模糊，但是，在移动设备上，它将根据 第二种情况下的视口调整大小，您可以拥有一些东西像这样

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  width: 100%;
  height: auto;
}

图像在大屏幕和小屏幕上都将占用 100% 的宽度，这意味着在移动设备上图像将调整为容器的 100%

您也可以使用viewport高度和宽度，这将确保图像根据您的宽度和高度值跨越整个页面，您还可以检查移动视口以了解如何设置移动屏幕的尺寸

我希望这会有所帮助

于 2020-04-04T09:05:52.270 回答