2

画像を使ってスマートフォンなどの小さな画面に滑らかに適応するヘッダーを作ろうとしていますが、うまく動作させることができません。

コンテナの最大幅が 500px で、画像の幅が 85px (左揃え) と 185px (右揃え) であり、解像度が 500px を超える場合は中央に 250px の空白が残ることをフィドルで適切に確認できると仮定しましょう。 . 実際のサイズは 2 倍ですが、関係ありません。

<div id="container">
    <div id="left">
        <div></div>
        <img src="..."/>
    </div>
    <div id="right">
        <div></div>
        <img src="..."/>
        <div></div>
    </div>
</div>
<style>
#container {
    margin:0 auto;
    max-width:500px;
    min-height:50px;
    height:20%;
    max-height:90px;
    background-color:#0FF;
}
#left {
    float:left;
    margin-top:5px;
    margin-left:10px;
    height:calc(100% - 5px);
}
#left div {
    height:calc(100% - 73px);
}
#left img {
    max-height:100%;
    max-width:85px;
    height:auto;
}
#right {
    float:right;
    margin-top:5px;
    margin-right:10px;
    height:calc(100% - 5px);
    position:relative;
}
#right div {
    height:calc(50% - (25px + 5px)/2);
}
#right img {
    max-width:185px;
    max-height:100%;
    height:auto;
    text-align:right;
}
</style>

このような：

http://jsfiddle.net/Pinx0/xGPvM/6/

幅が 270 ピクセルを超える解像度は、正常に機能します。垂直スケーリングも正常に機能します。

では、250px のような低解像度で何が起こるか見てみましょう:

http://jsfiddle.net/Pinx0/xGPvM/5/

フローティング アイテムは、縮小して 1 行に収まるのではなく、次の行に移動します。

予想される結果は、解像度が狭くなるにつれて両方の画像のサイズが縮小することです。

4

1 に答える 1

0

このフィドルを参照してください。

jsfiddle.net/xGPvM/7/

250px の解像度で画像をきれいに表示します。これをチェックして。画像の幅をパーセントで指定する必要があります。それは自動的に低解像度でうまくいきます。

于 2013-07-17T07:55:43.267 に答える