Voici quelques options de titre, visant un format de question et reflétant le contenu : * Images Google Maps déformées par Bootstrap : comment résoudre le problème de largeur maximale ? * Pourquoi mes images Google Maps sont-elles floues

Distorsion de Google Maps causée par Twitter Bootstrap CSS

Lors de l'utilisation simultanée de Twitter Bootstrap et de Google Maps, les images de la carte, telles que les marqueurs, peut se déformer. Ce problème est dû au style CSS présent dans Bootstrap.

La règle CSS spécifique responsable de cette distorsion est la propriété max-width, qui est appliquée à toutes les images de la manière suivante :

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

Lorsque cette propriété est appliquée aux images cartographiques, elle limite leur largeur maximale à l'espace disponible sur la page. En conséquence, les images deviennent asymétriques.

Pour résoudre ce problème, nous pouvons remplacer de manière sélective la propriété max-width pour les images Google Maps. Dans Bootstrap 2.0, le code CSS suivant peut être utilisé :

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

En appliquant ce remplacement à l'élément de canevas de carte (#mapCanvas), nous garantissons que la propriété max-width n'affecte pas les images dans le Carte Google. Cela permet aux images de s'afficher correctement sans aucune distorsion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!