Twitter Bootstrap によって Google マップの画像が歪んでしまっていますか?問題を解決する方法は次のとおりです。

Twitter Bootstrap CSS によって引き起こされる Google マップの画像の歪み

Twitter Bootstrap を使用すると、Google マップで予期しない画像の歪みが発生する可能性があり、特にマーカーに影響を及ぼします。この問題は、Bootstrap CSS に次の宣言が含まれていることが原因で発生します。

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

このプロパティを Google マップ画像に適用すると、マーカー画像が不均衡に拡大縮小されます。 Firebug を使用すると、max-width プロパティを無効にすると問題が解決します。

Bootstrap CSS が Google マップの画像に干渉しないようにするには、次の解決策を実装できます。

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

Byマップ コンテナー (#mapCanvas で識別される) 内の画像の Bootstrap CSS をオーバーライドすると、マーカー画像の通常の外観を復元できます。このソリューションにより、Bootstrap のスタイルが Google マップの画像に影響を与えず、Bootstrap と Google マップの両方が意図したとおりに機能できるようになります。

以上がTwitter Bootstrap によって Google マップの画像が歪んでしまっていますか?問題を解決する方法は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。