イメージのオーバーフローをそのコンテナにしますか？

Question

私は2つの「レイアウト」を作ろうとしています。 1つは画像がそのコンテナへの幅に適応し、もう1つは画像がそれをオーバーフローさせる。後者は難しいものです。私はまだきちんとした解決策を考え出すことができませんでした。私はフレックスボックスと位置を試してみました：要素を垂直に揃えるために絶対的ですが、それはちょうど大抵の時間を混乱させるでしょう。私は結果に本当に満足していない。

一部要件可能であれば：

1）位置を用いない：絶対。

2）要素が何らかの方法で垂直整列真ん中にする必要があり、私が達成したい何

：この問題に対する可能な解決策をdisplay: tableを使用して達成することができる

Answer 1

コンテナ要素の場合はdisplay: table-cellが2つのdivを垂直方向に中央に配置します。次に、画像に左右の余白をマイナスにして、コンテナをoverflow: visible（または好きなようにhidden）に設定するだけです。

要件が満たされています。

.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>