Question

我有一个带有背景图像的DIV。在电脑上看起来不错，但是当我上手机时它会放大吗？

以下是我的HTML和CSS代码：

.vh {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: url("http://autohof.coersonline.nl/wp-content/uploads/2016/09/Headerplaat-4.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

<div class="vh">
</div>

谢谢你的时间！

Answer 1

您可能遇到的问题是带有视口单元的iOS Safari 中的已知错误。尽量避免使用它们或使用this plugin来修复它。

Answer 2

背景将使用以下CSS响应高度。

background-image: url('YOUR_IMAGE');
background-repeat: no-repeat;
background-size: contain;
background-position: center;

html,
body {
  height: 100%;
  width: 100%;
}
.vh {
  height: 100%;
  width: 100%;
  background: url("http://autohof.coersonline.nl/wp-content/uploads/2016/09/Headerplaat-4.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="vh">
  </div>
</body>

</html>

div的背景图象放大在机动性

2 个答案: