以下に、質問形式を目的として内容を反映したタイトルのオプションをいくつか示します。 * ブートストラップによって歪んだ Google マップ画像: 最大幅の問題を解決するには? * Google マップの画像がなぜ Ske なのか

Twitter Bootstrap CSS による Google マップの歪み

Twitter Bootstrap と Google マップを同時に利用すると、マーカーなどの地図内の画像が、歪む可能性があります。この問題は、Bootstrap に存在する CSS スタイルが原因で発生します。

この歪みの原因となる特定の CSS ルールは、次の方法ですべての画像に適用される max-width プロパティです。

<code class="css">img {
    max-width: 100%;
}</code>

このプロパティをマップ画像に適用すると、画像の最大幅がページ上の利用可能なスペースに制限されます。その結果、画像が歪んでしまいます。

この問題を解決するには、Google マップ画像の max-width プロパティを選択的にオーバーライドできます。 Bootstrap 2.0 では、次の CSS コードを使用できます:

<code class="css">#mapCanvas img {
  max-width: none;
}</code>

このオーバーライドをマップ キャンバス要素 (#mapCanvas) に適用することで、max-width プロパティがマップ内の画像に影響を与えないようにします。 Googleマップ。これにより、画像が歪みなく正しく表示されます。

以上が以下に、質問形式を目的として内容を反映したタイトルのオプションをいくつか示します。 * ブートストラップによって歪んだ Google マップ画像: 最大幅の問題を解決するには? * Google マップの画像がなぜ Ske なのかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。