创建全宽图像

问题描述

我只想让图片的边缘伸展屏幕的宽度。

I would just like the edges of my image to stretch the width of the screen. Not looking for it to be a full background.

我的网站是www.jobspark.ca

My website is www.jobspark.ca

<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>

CSS

.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;
height:575px;
margin-left: -1600px;
margin-right: -1600px;
}

这个答案已经关闭，但网站的其他部分图像扩展全屏。

This answer was close but then the rest of the website that isn't an image extended full screen.

#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}

将960px更改为100％

change 960px to 100%

&摆脱

margin-left: -1600px;
margin-right: -1600px;

我已经争取了这个问题几天了， 。可能需要缩小才能看到问题。

I have been fighting with this issue for a few days now and would be soo happy to figure something out. Might have to zoom out to see the issue.

推荐答案

为了实现这个目标，我通常定义一个div元素，适合我想要我的背景图像填充的确切的大小和位置。

to achieve this goal i typically define a div element that fits the exact size and position i want my background image to fill.

然后使用background-size的css属性：cover;这个Cover属性自动缩放图像，以确保整个背景区域实际上被图像覆盖。

then use the css attribute for background-size:cover; this Cover attribute scales the image automatically to ensure the entire background area is in fact "covered" by image. see the documentation here

还值得注意的是，在中心固定宽度区域之间实现间断的全宽度区域，我喜欢使用这种方法来定义非常类似于yours的.wrapper类。然后结束全宽区域的包装，然后再次重新启动它

it is also worth noting to achieve intermittent full width areas between centered fixed width areas i like to use this method of defining a .wrapper class very similar to yours. then ending that wrapper for the full width area and once again restarting it afterwards

我对代码的调整如下：

CSS

.fullWidthSectionBG {
    background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    height:575px;
    background-size: cover;
}

HTML

<div class="wrapper">
     <!-- HEADER HERE -->
</div>

<div class="fullWidthSectionBG">
     <div class="wrapper">
          <!-- FULL WIDTH BANNER CONTENT HERE -->
     </div>
</div>

<div class="wrapper">
     <!-- BODY HERE -->
</div>

尝试一下让我知道它是如何工作的 - 希望这有帮助！

try it out let me know how it works - hope this helps!

这篇关于创建全宽图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！