1

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

ここにデモがあります。翼は伸ばした腕であり、モバイル デバイスで表示する必要はありません。

4

1 に答える 1

1

必要な最小幅がわかっている場合は、メディアクエリで実行できるかもしれません。次に、固定サイズを設定できます。

@media screen and (max-width:480px) {
  #pic {
    background-size:350px 100%;
  }
}

ここでコードhttp://jsfiddle.net/8QbXe/15/を確認してください。必要な実際の寸法を変更するだけです。

于 2013-10-21T19:55:03.633 に答える