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

我确信这个问题在某个地方得到了答案，但我似乎找不到。

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

<!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>

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

这是我试图让这张照片看起来像什么的代码笔：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（既不覆盖也不包含作品。背景大小：1300px 600px非常接近，但不会考虑不同的屏幕大小。）

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

试试这个：

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

演示

这应该能在中工作

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

在正文中添加边距0，以消除顶部和侧面的多余空间。

您可以将#parallaxImage的大小强制设置为带填充顶部的图像的大小。查看css中的注释，了解如何计算填充顶部应该是什么。

这样，你的形象将是有反应的，永远不会超出比例。

我希望这就是你的要求。

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>

相关内容

最新更新

热门标签：