1

Twitter Bootstrap を使用して最初の Web サイトを作成しています。画面サイズが十分に小さいサイズに達すると、ページのロゴ画像のスケーリングが停止し、サイズがジャンプする理由を理解しようとしています。

現在の動作では、iPhone でサイトが恐ろしく見えます。

画像ファイル自体は 200 x 500 px の .gif

ここにコードを含むjsfiddleがあります： http://www.jsfiddle.net/eugip9/uyGH9

そして、ここにあるdivのコードは次のとおりです。

<div class="row">
    <div class="span1">
    <img src="./HomePage/logo-02.gif" center alt>
    </div>
    <div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11">
        <h1>Site Title</h1>
    </div>
</div>

画像はある程度縮小されますが、画面が十分に小さくなると、画像は 200px x 500px に戻ります

デフォルトのbootstrap-responsive.cssを使用しています

4

1 に答える 1

2

画面が 767 ピクセル未満の場合、すべてのスパンの幅は 100% になります。したがって、テーマのすべての画像にはmax-width: 100%プロパティがあるため、画面が 767px 未満の場合に画像のサイズが変更されます。

Photoshop (または同様のもの) を使用して、画像を目的の幅にサイズ変更することをお勧めします。CSS を使用して画像のサイズを変更することは、必ずしも良い考えではありません。それをしたくない場合は、画像にIDを付けてmax-width: 64pxから、そのロゴにaを付けてください。

于 2013-04-23T06:52:09.740 に答える