1

次の Web サイトで Bootstrap 2.3.0 を使用しています: www.agrium.com/AgTracker

私が抱えている問題は、ブラウザ ウィンドウのサイズが変更されたとき、またはユーザーがタブレット/電話を使用しているときに、ページの最上部にある 2 つのロゴが希望どおりに表示されないことです。

以下では、デスクトップで Chrome を使用してこの動作を示しています。

状況 #1: 全画面表示、ロゴが横に広がり、フル サイズ。私はこれに満足しています。 ここに画像の説明を入力

状況 #2: 画面サイズは縮小されていますが、ロゴはフルサイズのままです。ロゴが同じライン上にとどまり、ロゴが拡大縮小 (縮小) されるようにしたいと考えています。 ここに画像の説明を入力

状況 #3: これは、状況 #2 を修正することで解決される可能性がありますが、ブラウザーの幅をさらに縮小すると、Agrium のロゴは拡大されますが (やった!)、AgTracker のロゴは拡大されません (ブー)。

ここに画像の説明を入力

CSS の更新、または Bootstrap を使用している方法で、ロゴを拡大縮小して同じ行に維持できるようにするための助けをいただければ幸いです。

4

1 に答える 1

0

この問題を解決するには、いくつかの方法があります。

  1. 最初に、最初の 2 つのイメージが実際には 2 つではなく、1 つのイメージであることを認識する必要があります。この手法を使用すると、これら 3 つの画像すべてを 1 つの画像ファイルに結合した 1 つの png または jpg ファイルを作成できます。これはお勧めしませんので、CSS を使用したより堅牢なソリューションを提案したいと思います。私の2番目のポイントを見てください。

  2. CSS3 Media Query と呼ばれる CSS3 の組み込み機能を使用できます。このテクノロジーにより、レスポンシブ Web サイトを作成し、モバイル、タブ、デスクトップなどのさまざまなデバイスでコンテンツがどのように表示されるかを指定できます。

于 2013-08-09T22:09:53.037 に答える