Positionieren Sie ein Bild außerhalb der container

Bin ich zu kämpfen mit arbeiten heraus, wie diese zu arbeiten.

Ich habe ein Bild innerhalb einer wide-header div. Es ist eine ansprechende header, also das Bild eingestellt ist width:100% um die banner Größe ändern, um die Größe der container.

Problem ist, muss das Bild sitzen, in voller Breite, aber der container hat eine 10px-margin-auf beiden Seiten.

Den HTML - nicht ändern wie es ist CMS-basiert. Die banner müssen drinnen sitzen region-content mit Rand 10px beiden Seiten

Habe ich erfolgreich geschafft, schieben Sie das Bild auf der linken Seite am Rand durch die Verwendung eines position:relative auf das Bild und stellen Sie es left:-10px Zähler der linken Seite eine Lücke.

Problem ich habe, ist das gleiche tun auf der gegenüberliegenden Seite, wie kann ich verlängern Sie die Breite. Der banner muss 20px breiter... aber es ist festgelegt als ein Prozentsatz der Breite so einfach das hinzufügen von 20px nicht funktioniert.

Im wesentlichen brauche ich, um herauszufinden, wie man diese arbeiten als 100% + 20px.

Es ist für mobile, damit border-box:box-sizing verwendet werden könnte, aber ich kann nicht nutzen diese korrekt, obwohl ich sicher bin die Lösung die es erfordern können.

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

InformationsquelleAutor Francesca | 2013-05-09

2

Andere Möglichkeit ist, den folgenden zu tun (obwohl Sie vielleicht zu prüfen, Ihre anderen Inhalt innerhalb der #wide-header)
```
position:relative;
left:-10px;
```
zu
```
position:absolute;
left:0;
right:0;
```
Habe ich aktualisiert Ihre Geige http://jsfiddle.net/zr8xp/3/

InformationsquelleAutor user2319914
1

Wenn Sie möchten, erhöhen Sie die Breite mehr als 100%. Versuchen Breite:105%; sehen diese editierte fiddle es ist die gleiche wie 100% + 20px
```
width:105%;
```
InformationsquelleAutor bot
0

Wenn Sie nicht die Mühe über alte Versionen des IE können Sie versuchen, auf diese Weise:
```
width: calc(100% + 20px);
```
JSFIDDLE
- Danke, gerade gefunden dieses selbst. Ich checke um zu sehen, ob Opera und Android-Browser benötigt, da Sie dies nicht unterstützen.
- hier ist ein link, um welche Browser es unterstützen: caniuse.com/calc
InformationsquelleAutor Andrew

Ich ein update Ihrer jsfidle, indem Sie einige css-Modifikationen:
link: 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>

InformationsquelleAutor Romain

Versuchen Sie dies:

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

Einem anderen Ansatz eine überlegung Wert ist, mit einem hintergrund-Bild statt. 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>

InformationsquelleAutor ralph.m

0

Ich Tat dies, indem Sie meine img in ein DIV-Element, und legen Sie die div style: "float:right;width:0px;overflow:visible;

So entstand das Bild auf der rechten Seite der main-content-div, der außerhalb der Breite meines headers und anderer Inhalte.

InformationsquelleAutor todji

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.