Question

我正在尝试让图像占据页面的整个宽度，同时在具有给定宽度的div内。我设法通过将其添加为背景图像并添加以下样式来实现此目的：

background-image: url(URL);
width: 100%;
height: 400px;
position: absolute;
left: 0;

然而，图像现在位于我所有其他元素的顶部，所以我需要将div显示为块或内联块元素，但我不确定实现此目的的路由，因为我申请那些款式没什么变化。让我知道是否有一个很好的方法来做我想做的事情。谢谢！

这是我的问题的JSFiddle示例：http://jsfiddle.net/T2t47/13/

Answer 1

看起来这可能是您正在寻找的http://jsfiddle.net/T2t47/12/

.introduction div {
    position:relative;
    height:200px;
    width:100%;
    background-position: center center;
    background-size:cover;
    left: 0;
    top:0;
    z-index: -999;
}

Answer 2

如果我理解正确，您希望图片显示在示例中的列表上方？如果是这样，只需删除position：absolute;并离开：0;应保持图像填充页面的整个宽度并将其放在列表上方。这是因为位置：绝对;从文档流程中取出div。

所以你的风格将是：

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
}

http://jsfiddle.net/94Yvw/

Answer 3

因此，元素落在此元素下面的原因是因为它从文档流中取出。（正如你之前可能已经读过的那样。）把它想象成一个被鹅卵石包围的盒子。随着盒子的到位，鹅卵石在盒子周围精美地坐着。然而，如果我们拉起盒子，我们的一些鹅卵石会落在盒子下方，我们再也看不到了它们。它被算作我喜欢称之为鬼元素的东西。它是未被发现的，也是其他元素无法触及的。

（对不起，我知道这很啰嗦。）

基本上，你在项目中所做的就是打破它。如果一个元素的宽度为200像素，则其中的任何内容都不应超过200像素宽。

因此，我在JSFiddle中提供的最佳解决方法显示您将父元素设置为no max-width。但是要添加容器元素，在包含必要元素的容器元素内部，并将它们的宽度设置为您需要的任何设置宽度。

.container{
  width: 100%;
}
.h1-container{
  width: 200px
}
.img-container{
  width: 100%;
}

这允许图像元素室呼吸，以及其他元素所需的遏制。

此外，还有一个很好的职位链接：http://css-tricks.com/absolute-relative-fixed-positioning-how-do-they-differ/

Answer 4

这是您想要的结果吗？

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
    position: absolute;
    left: 0;
    z-index: -5; /* now it is not on top of everything ! */
}

http://jsfiddle.net/T2t47/4/

Answer 5

可以使用vw单位和负边距轻松完成。它的反应友好。

.full-width-block {
  width: 100vw;
  position: relative;
  left: 50%;  
  margin-left: -50vw;
}

看我的小提琴： https://jsfiddle.net/ondrejruzicka/ghs6kmgw/

需要容器内的图像跨越页面的整个宽度，并仍然充当内联块/块元素

5 个答案: