Question

我确定这已在某个地方得到解答，但我似乎无法找到它。

我试图在标题上获得视差效果，但标题需要拉伸一点才能达到全宽。我想要的是以下代码，但我需要将图像设置为背景：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
        <img width="100%" height="600px" src="https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1">
    </header>

    <script src="jquery-2.2.1.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

我尝试过使用background-size：cover，background-size：contains和其他几个选项，使其作为背景图像拉伸到全宽，但我能做到的唯一方法是手动设置背景大小的像素，不是动态的。

以下是我试图让图片看起来像的代码：http://codepen.io/anon/pen/yOpLGW（注意它被拉伸到全宽

我的尝试是以css作为背景：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header id="parallaxImage">
    </header>

    <div style="height: 2000px; text-align: center;">Just parallaxing</div>

    <script src="jquery-2.2.1.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

的style.css

#parallaxImage {
  background-image: url('https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1');
  background-color: #d3d3d3;
  /*background-width: 100%;
  min-width: 100%; */
  background-size: 1300px 600px; /* I've tried cover and contain */
  position: relative;
  height: 600px;
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin-top: 0;
  padding: 0;
}

http://codepen.io/anon/pen/YqYzBQ（既不包括也不包含作品.background-size：1300px 600px非常接近，但不会考虑不同的屏幕尺寸。）

它在CodePen中看起来并不合适，但它在完整的浏览器中看起来很好。

Answer 1

试试这个：

<style>
#parallaxImage {
    ...
    background-size: 100% auto;
}
</style>

<强> Demo

Answer 2

这应该有效

#parallaxImage {
  background-size: 100% 600px;
  ...
}

Answer 3

向身体添加边距0以消除顶部和侧面的额外空间。

您可以使用padding-top将#parallaxImage的大小强制为图像的大小。请参阅css中的注释，了解如何计算padding-top应该是什么。

通过这种方式，您的图像将具有响应性，并且永远不会超出比例。

我希望这就是你所要求的。

body {
    margin:0;
}

#parallaxImage {
    /* 
    width of image / height of image * width
    668px / 1001px * 50  = 33.3666333666
    (change the 50 in this formula to whatever you want.)
    */
    padding-top: 33.3666333666%;
    background-image: url('https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1');
    background-color: #d3d3d3;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

<header id="parallaxImage"></header>

<p>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla </p>

标题图像在设置为背景时不会缩放/拉伸到全宽

3 个答案: