标题图片设为背景时，不会缩放/拉伸为全角
[英]header image won't scale/stretch to full-width when it's set as background
问题描述
I'm sure this has been answered somewhere but I can't seem to find it. 
我确定这已经在某处得到了回答，但是我似乎找不到。
I'm trying to get the parallax effect on a header, but the header needs to stretch a little bit to reach full-width. 我正在尝试在标头上获得视差效果，但是标头需要拉伸一点以达到全角。 What I want is the following code, but I need the image to be set as background: 我想要的是以下代码，但是我需要将图像设置为背景：
<!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>
I've tried using background-size: cover, background-size: contain, and several other options to make it stretch to full width as a background-image, but the only way I can do it is manually setting pixels for background-size which is not dynamic. 我尝试使用background-size：cover，background-size：contain和其他几个选项来使其拉伸到全宽，作为背景图像，但是我能做到的唯一方法是手动设置background-size的像素这不是动态的。
Here's a codepen of what I'm trying to have the picture look like: http://codepen.io/anon/pen/yOpLGW (Notice it's stretched to full-width 这是我想要的图片的codepen： http ://codepen.io/anon/pen/yOpLGW（注意，它已拉伸到全角
Here's my attempt to make it work with css as a background: 这是我尝试使其与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 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 (neither cover nor contain work. background-size: 1300px 600px is pretty close but won't account for different screen sizes.) http://codepen.io/anon/pen/YqYzBQ （既不包含也不包含任何作品。background-size：1300px 600px非常接近，但不会考虑不同的屏幕尺寸。）
It doesn't really look right in CodePen, but it looks fine in a full browser. 它在CodePen中看起来并不正确，但是在完整的浏览器中看起来还不错。
3 个解决方案
解决方案1
0 2016-04-06 21:17:21
解决方案2
0 2016-04-06 21:21:14
This should work 这应该工作
#parallaxImage {
background-size: 100% 600px;
...
}
解决方案3
0 2016-04-06 21:27:20
add a margin 0 to the body to get rid of the extra space on top and sides. 在主体上添加边距0可以消除顶部和侧面的多余空间。
you can force the size of #parallaxImage to the size of the image with padding-top. 您可以使用padding-top将#parallaxImage的大小强制为图像的大小。 see the comments in the css to see how you can calculate what the padding-top should be. 请参阅CSS中的注释，以了解如何计算padding-top应该是什么。
this way your image will be responsive and never stretched out of proportion. 这样一来，您的图片就会变得灵敏，并且永不超出比例。
i hope this is what you are asking for. 我希望这是您要的。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.