Make Bild Überlauf seinen Container?

Question

Ich versuche, zwei "Layouts" zu machen; eine, bei der das Bild die Breite an seinen Container anpasst und eine, wo das Bild überläuft. Letzteres ist ein heikles Thema. Ich war noch nicht in der Lage, eine saubere Lösung zu finden. Ich habe Flexbox und Position versucht: absolut, um das Element vertikal auszurichten, aber es endet meistens in einem Durcheinander. Ich bin nicht wirklich zufrieden mit dem Ergebnis.

Einige Anforderungen, wenn möglich:

1) Keine Verwendung von position: absolute;

2) Elemente benötigt vertikale align Mitte

in irgendeiner Art und Weise sein, was ich erreichen möchte:

Answer 1

Eine mögliche Lösung für dieses Problem kann mit display: table erreicht werden für das Containerelement und display: table-cell, um die beiden Divs vertikal zu zentrieren. Dann müssen Sie Ihren Bildern nur einen negativen Rand links/rechts geben und den Container auf overflow: visible (oder hidden, wie Sie möchten) setzen.

Anforderungen erfüllt.

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    border: 1px solid; 
 
    display: table; 
 
    margin-bottom: 10px; 
 
    overflow: visible; 
 
} 
 
.cell { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
.container .image, 
 
.container .content { 
 
    width: 250px; 
 
    display: inline-block; 
 
} 
 
.container .image { 
 
    background: url(https://unsplash.it/300); 
 
    height: 150px; 
 
} 
 
.container .content { 
 
    padding: 0 20px; 
 
    box-sizing: border-box; 
 
} 
 
.col-right { 
 
    float: right; 
 
} 
 
.col-left { 
 
    float: left; 
 
} 
 
.container.hard .image { 
 
    background: url(https://unsplash.it/400); 
 
    height: 200px; 
 
    width: 350px; 
 
} 
 
.container.hard .image.image-left { 
 
    margin-left: -100px; 
 
} 
 
.container.hard .image.image-right { 
 
    margin-right: -100px; 
 
}

<h1>Easy Part</h1> 
 
<div class="container"> 
 
    <div class="cell"> 
 
    \t <div class="image"></div> 
 
    </div> 
 
    <div class="cell"> 
 
\t <div class="content col-right"> 
 
\t  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="container"> 
 
    <div class="cell"> 
 
\t <div class="content col-left"> 
 
\t  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t </div> 
 
    </div> 
 
    <div class="cell"> 
 
    \t <div class="image"></div> 
 
    </div> 
 
</div> 
 

 
<h1>Hard Part</h1> 
 
<div class="container hard"> 
 
    <div class="cell"> 
 
    \t <div class="image image-left"></div> 
 
    </div> 
 
    <div class="cell"> 
 
\t <div class="content col-right"> 
 
\t  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="container hard"> 
 
    <div class="cell"> 
 
\t <div class="content col-left"> 
 
\t  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
\t </div> 
 
    </div> 
 
    <div class="cell"> 
 
    \t <div class="image image-right"></div> 
 
    </div> 
 
</div>