如何最小化图像以在手机上设置

Question

我使用下面的 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;
}

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

有没有办法在浏览器和移动设备上显示相同的图像，或者我可以将上面的图像缩小到特定尺寸并在移动设备上显示吗？

Answer 1

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

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

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

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

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

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

在你的情况下，你的图片似乎在 body 标签内，在第一种情况下

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 高度和宽度，这将确保图像根据您的宽度和高度值跨越整个页面，您还可以检查 mobile viewports 以了解您如何可以设置手机屏幕尺寸

希望对您有所帮助

Answer 2

如果百分比(%)不起作用，可以使用vh(view port height)和vw(view port width)设置背景大小

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

可以预览了Here

如何最小化图像以在手机上设置

How to minimize the image to set on mobile

html

css

image-rendering