以下是一些標題選項，旨在形成問題格式並反映內容： * Google 地圖圖片被 Bootstrap 扭曲：如何解決最大寬度問題？ * 為什麼我的 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 地圖圖片被 Bootstrap 扭曲：如何解決最大寬度問題？ * 為什麼我的 Google 地圖圖片是 Ske的詳細內容。更多資訊請關注PHP中文網其他相關文章！