ブートストラップ付きの半ページイメージ

Question

それぞれ2ページのイメージが、ページの幅の半分とページ全体（スクロールせずに）の高さを必要とします。下の画像に示すように。たとえそれがクロッピングを必要としたとしても、スペースを埋めるために画像を拡大する必要はありません。

私は動作するものは何もオンラインでは見つかりません。イメージは常にコンテナの境界の外側に広がっているか、コンテナの境界に合わせて適切に縮尺されていません。

Answer 1

これはなんですか？

html, 
 
body{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
img{ 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.header{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #eee; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.content{ 
 
    height: calc(100vh - 100px); 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    text-align: center; 
 
    background: #ddd; 
 
    overflow: hidden; 
 
} 
 

 
.content > div{ 
 
    flex: 1; 
 
    width: 100%; 
 
}

<div class="header"> 
 
<p>Header</p> 
 
</div> 
 
<div class="content"> 
 
    <div class="content-one"> 
 
    <img src="http://via.placeholder.com/1500x1500"> 
 
    </div> 
 
    <div class="content-two"> 
 
    <img src="http://via.placeholder.com/1500x1500"> 
 
    </div> 
 
</div>

Answer 2

ブートストラップは、列間の側溝を追加しますので、これはブートストラップなしで達成することが容易になるだろう。一つの方法は、背景画像などの画像を設定することと、これは大きなイメージで動作するようには思えないbackground-size:contain;

html,body { 
 
    height:100%; 
 
    margin:0; 
 
} 
 

 
nav { 
 
    height:100px; 
 
    line-height:100px; 
 
    background:#0080ff; 
 
    color:#fff; 
 
    font-size:40px; 
 
    text-align:center; 
 
} 
 

 
.column { 
 
    width:50%; 
 
    height:100%; 
 
    background-size:contain; 
 
} 
 
    .column.left { 
 
    background-image:url(http://placehold.it/1000x800/ca6602/fff?text=Image+1); 
 
    float:left; 
 
    } 
 
    .column.right { 
 
    background-image:url(http://placehold.it/1000x800/e10227/fff?text=Image+2); 
 
    float:right; 
 
    }

<nav>Nav Bar</nav> 
 
<div class="column left"></div> 
 
<div class="column right"></div>