Question

我的网页上有背景图片：

    body {
        background-image    : url("https://example.com/image.png");
        background-size     : cover;
        background-repeat   : no-repeat;
    }

这适用于16：9的屏幕，但对于手机（9:16），图像覆盖（种类）只有一半的屏幕！

如何根据宽高比指定不同的图像？

Answer 1

你可以试试这个。您的图像位置可能有问题

＆＃13;

body{
  background: url(http://www.planwallpaper.com/static/images/nature-wallpapers-hd.jpg) no-repeat top center fixed; 
   -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

＆＃13;

显示这一点，它可以帮助您理解background-size CSS background image to fit width, height should auto-scale in proportion

Answer 2

这将始终与background-size: cover一样，浏览器尝试使用相同的背景填充元素。您仍然可以使用background-position进行一些调整，但在这些情况下它并没有真正的帮助。

可能更好的是，您根据屏幕尺寸使用媒体查询来使用不同的背景。

像

这样的东西

@media only screen and (max-width: 640px) {
  background: url(../images/mobile-background.jpg) no-repeat center center;
  background-size: cover;
}

@media only screen and (min-width: 641px) {
  background: url(../images/large-background.jpg) no-repeat center center;
  background-size: cover;
}

通过这种方式，您可以为这两种情况选择特定的图像，其中一些好处包括更合适的图像尺寸，从而可以为用户带来更快的负载和更少的带宽消耗。这也会带来更好的Page Speed结果。

Answer 3

这涉及CSS中的宽高比：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio。谢谢@GabyakaG.Petrioli

//Open the socket 
ServerSocket mySocket = new ServerSocket(portNum);
Socket connectionSocket = mySocket.accept();

//Set up a reader on the socket to get what's coming from it
BufferedReader in = new BufferedReader(new InputStreamReader(connectionSocket.getInputStream()));

String line = in.readLine(); //hang occurs here

while(line != null) {
    System.out.println(line);
    line = in.readLine();;
}

在具有不同宽高比的屏幕上处理CSS背景图像。（16：9 - > 9:16）

3 个答案:

在具有不同宽高比的屏幕上处理CSS背景图像。 （16：9 - > 9:16）

3 个答案:

在具有不同宽高比的屏幕上处理CSS背景图像。（16：9 - > 9:16）