【问题标题】：Background-attachment: fixed image fluid to a certain point背景附件：将图像流体固定到某个点
【发布时间】：2014-05-01 09:11:31
【问题描述】：

我的背景图像仅在某一点上是流动的。调整浏览器大小时，它开始缩小

background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;

你可以看到我在说什么here

【问题讨论】：

请详细说明，期望的行为是什么？
我希望这张图片是流畅的。就像现在一样，当我将浏览器调整到最窄点时，我看不到整个图像，只剩下桌子，没有我：]

标签： html css fixed background-attachment fluid-images

【解决方案1】：

高度：400vh 是你的问题，我相信如果你可以把这段代码放在 html 元素上

 html { 
  background: url("http://...") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

并从您的代码中删除“我”类，这对您来说应该是流畅的。问题是您将背景设置在“我”上，它不包含任何内容，并且它的高度仅由您设置为“400vh”，因此一旦达到该高度，它就会停止流动，因此通过在 html 上设置它将包裹整个页面并保持流畅

编辑

如果您希望不剪裁图像并在每个屏幕上显示 100% 的图像，您可以这样做

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto 0px;
}

将 me 类变成图像而不是 div

<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>

还有这样的css

.me { 
  width: 100%;
 }

这将为您提供一个覆盖 100% 的人物屏幕尺寸的换行，并允许您将图像设置为背景，并且在调整大小时不会剪切图像。如果您试图使该网站具有响应性，我不建议在您的 css 中使用绝对引用，因为这可能会导致某些项目在不同的屏幕尺寸上不合适。您可能想查看 www.getbootstrap.com，因为它们为响应式网格提供了出色的库。

【讨论】：

谢谢，我试过了，但没有用。这里是link
好吧，让我们尝试一下其他方法，这样您希望图像在调整浏览器大小时始终保持全尺寸？
在调整页面大小时尝试保持图像全尺寸的唯一问题是，如果视图的高度大于图像的大小，则底部可能会有一些空白空间你没事吧？
编辑了我的答案，如果这是你想要完成的，请告诉我

【解决方案2】：

click_hear_demo

css

#wrap{
    display:block;
    width: 100%
   }
body {
    margin: 0 0;
    position: relative;
   }

.me { 
    background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center right;
    height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}

}

html

<body>
    <div id="wrap">
        <div class="me"></div>
    </div> <!-- end of #wrap -->
</body>

【讨论】：