1

我正在努力解决如何让它发挥作用。

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

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

HTML不能更改，因为它是基于 CMS 的。横幅必须放在里面，两边都有region-content边距10px

position:relative通过在图像上使用 a 并将其放置left:-10px以抵消左侧间隙，我已成功地将图像推到最左侧边缘。

我遇到的问题是在另一侧做同样的事情，因为我无法扩展宽度。横幅需要宽 20 像素……但它设置为基于百分比的宽度，因此简单地添加 20 像素是行不通的。

本质上，我需要弄清楚如何让它以 100% + 20px 的形式工作。

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

JS小提琴

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;
}
4

6 回答 6

2

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

position:relative;
left:-10px;

至

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

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

于 2013-05-09T09:59:53.343 回答
1

如果您想将宽度增加 100% 以上。尝试宽度：105%；看到这个编辑过的小提琴它与 100% + 20px 相同

width:105%;
于 2013-05-09T09:59:14.130 回答
0

尝试这个：

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

另一种值得考虑的方法是使用背景图像。例如

<!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>
于 2013-05-09T09:53:54.173 回答
0

如果您不介意旧版本的 IE，您可以尝试以下方法：

width: calc(100% + 20px);

JSFIDDLE

于 2013-05-09T09:55:39.620 回答
0

I did this by putting my img in a DIV and set the div style: float:right;width:0px;overflow:visible;

This created the image to the right of main content div, outside of the width of my header and other content.

于 2013-10-31T21:11:31.403 回答
0

我通过添加一些 CSS 修改来更新您的 jsfiddle：链接：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>
于 2013-05-09T10:01:13.863 回答