以下是一些标题选项，旨在形成问题格式并反映内容： * 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 地图图像被 Bootstrap 扭曲：如何解决最大宽度问题？ * 为什么我的 Google 地图图像是 Ske的详细内容。更多信息请关注PHP中文网其他相关文章！