Question

我正在努力研究如何让它发挥作用。

我在wide-header div中有一张图片。它是一个响应式标题，因此图像设置为width:100%，以使横幅调整为其容器的大小。

问题是，图像需要全宽，但容器的两边都有10px的边距。

HTML 无法更改，因为它基于CMS。横幅必须位于region-content内，其边缘为10px

我已成功设法将图像推到最左边，方法是在图像上使用position:relative并将其放置left:-10px以对抗左侧间隙。

我遇到的问题是在另一边做同样的事情，因为我无法扩展宽度。横幅需要宽20倍...但它设置为基于百分比的宽度，所以简单地添加20px不起作用。

基本上我需要弄清楚如何让它以100％+ 20px的速度运行。

它适用于移动设备，因此可以使用border-box:box-sizing，但我无法正确使用此功能，但我确信解决方案可能需要它。

JS Fiddle

HTML

<div id="region-content">
    <div class="content">
          <!-- HEADER IMAGE -->
            <div id="wide-header">
                <img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
            </div>
    </div>
</div>

CSS

body{margin:0 auto;}

#region-content{
margin-left: 10px;
margin-right: 10px;
    outline:1px solid red;
}

#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}

#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
    position:relative;
    left:-10px;
}

Answer 1

另一种方法是执行以下操作（尽管您可能需要查看＃wide-header内的其他内容）

position:relative;
left:-10px;

到

position:absolute;
left:0;
right:0;

我已更新您的小提琴http://jsfiddle.net/zr8xp/3/

Answer 2

如果要增加宽度超过100％。尝试宽度：105％; 看到此编辑fiddle与100％+ 20px相同

width:105%;

Answer 3

试试这个：

#wide-header img {
height: auto;
margin: 0 -10px;
max-width: 1300px;
}

另一种值得考虑的方法是使用背景图像。 E.g。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

body{margin:0 auto; 
    background-image: url(http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: 50% 0;
}

#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;

min-height: 600px;
}

#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}


</style>

</head>
<body>

<div id="region-content">
    <div class="content">
        <div id="wide-header">
        </div>
    </div>
</div>
</body>
</html>

Answer 4

如果您对IE的旧版本不感兴趣，可以尝试这种方式：

width: calc(100% + 20px);

JSFIDDLE

Answer 5

我通过添加一些css修改来更新你的jsfidle：链接：http://jsfiddle.net/zr8xp/8/

<强> CSS：

body{margin:0 auto;}

#region-content{
margin-left: 10px;
margin-right: 10px;
    outline:1px solid red;
}

#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
padding-left: 10px;
padding-right: 10px;
}

#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
    position:relative;

}

<强> HTML：

<div id="region-content">
    <div class="content">
          <!-- HEADER IMAGE -->
            <div id="wide-header">
                <img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
            </div>
    </div>
</div>

Answer 6

我是通过将我的img放入DIV并设置div样式来实现的：float：right; width：0px; overflow：visible;

这会在主要内容div的右侧创建图像，超出标题宽度和其他内容。

将图像放在它的容器外面

6 个答案: