Question

我在页面顶部有一个div，它被分配了一个视差图像，当视口不那么宽时，图像没有响应，我怎样才能使背景图像响应？

＆＃13;

#parallax{
    height:100vh;
    background:url("../images/keyboard.jpg");
    background-size: cover;
    background-attachment: fixed;
}

＆＃13;

    <div id="parallax">
    <div class="col-md-1"></div>
    <div id="profile" class="bottom-align col-md-4">

    </div>
</div>

＆＃13;

以下是我的意思是没有反应的截图

基本上我想要＆＃34;网站＆＃34;显示何时视口不宽，而不是＆＃34; WE＆＃34;

Answer 1

让您的图片宽度为100％。我将图像标签放在div中以表示屏幕尺寸。

<div style="width:20%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:40%">    
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:60%">    
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:80%">    
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:100%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>

Answer 2

background-size: cover缩放背景图片以填充移动设备上高而窄的包含元素的整个高度，裁剪图像。

您应该使用background-size: contain而不是cover，或者允许包含元素缩小到小于100vh。与前者的警告是你需要弄清楚用什么来填充容器的其余部分。

以下是一个例子：

.target {
  background: url(http://placekitten.com/300/100);
  background-position: center center;
  background-color: teal;
  background-size: cover;
  background-repeat: no-repeat;
  height: 150px;
  width: 100px;
}
.better {
  background: url(http://placekitten.com/300/100);
  background-position: top center;
  background-color: teal;
  background-repeat: no-repeat;
  background-size: contain;
  height: 150px;
  width: 100px;
}

<html>

<body>
  Cover:
  <br>
  <div class="target"></div>

  Contain:
  <br>
  <div class="better"></div>

  <div>
    Original:
    <br>
    <img src="http://placekitten.com/300/100" ?>
  </div>
</body>

</html>

Answer 3

一个简单的解决方案是：

让您的体型伸展到整个视口

body{ width:100%; height:100%; /* on the example due to some overflow I've used 97% to prevent scroll bars

...
让你的背景图片填充身体元素

background-image:url(...); background-position:cover;

就是这样，

为标题居住一个空白区域会使图片位置向下偏移，方向是标题的宽度。

background-position:50px;

不便之处在于，当您想要拥有实际内容而不能依赖其他页面的相同样式表时，您必须对其进行更改。

当然，您在此处的示例中看不到任何响应，因为代码段在固定宽度容器中的方式。但经过测试，它可以按预期工作。（至少你可以看到图像与the original one here相比如何拉伸）

.header{
	border:solid ;
	width:100%;
	height:50px;
    text-align:center;
}

body{
  width:97%;
  height:97%;

  background-repeat:no-repeat;
  background-image:url(https://i.stack.imgur.com/AWVa6.jpg);
  background-position:0 50px;
  background-attachment:fixed;
  background-size:cover;
}

<div class="header">your header or navigation bar</div>

如何制作div resposive的视差背景图像

3 个答案: