1ページのサイトの最初のページ/ヘッダーに、腕を横に伸ばした人物のポートレートがあります. このポートレートは中央に配置され、この最初のページ/ヘッダーの下部に引き下げられます。すべて正常に動作しますが、ウィンドウのサイズをモバイル デバイスのサイズに変更すると、「background-size: cover」の値によってサイズが変更されるため、ポートレートが小さすぎます。
ポートレートを特定のウィンドウ幅まで小さくし、それ以降は中央に配置したままオフにオーバーフローさせる方法はありますか? 'min-width' を指定すると、ウィンドウの右側だけにオーバーフローし、中央に配置されなくなります。
モバイルデバイスでは伸ばした腕を表示する必要はありませんが、ポートレートの残りの部分は表示する必要があるため、オーバーフローさせたいと考えています。また、画像はウィンドウの高さの約 70% の高さを維持する必要があります。
HTML:
<div id="container">
<div id="cont-pic">
<div id="pic">
</div>
</div>
</div>
CSS:
#container {
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: red;
}
#cont-pic {
position: absolute;
width: 100%;
height: 100%;
bottom: 0px;
overflow: hidden;
}
#pic {
display: block;
position: absolute;
bottom: 0px;
width: 100%;
height: 70%;
margin: 0 auto;
background: url('img/pic.png') no-repeat center bottom;
background-size: contain;
}
ここにデモがあります。翼は伸ばした腕であり、モバイル デバイスで表示する必要はありません。