Heim > Artikel > Web-Frontend > Ist Ihr Google Maps-Bild durch Twitter Bootstrap verzerrt? Hier erfahren Sie, wie Sie das Problem lösen können.
Google Maps-Bildverzerrung durch Twitter-Bootstrap-CSS
Die Verwendung von Twitter-Bootstrap kann zu unerwarteten Bildverzerrungen in Google Maps führen, insbesondere bei Markierungen. Dieses Problem entsteht durch das Bootstrap-CSS, das die folgende Erklärung enthält:
<code class="css">img { max-width: 100%; }</code>
Wenn diese Eigenschaft auf Google Maps-Bilder angewendet wird, werden Markierungsbilder unverhältnismäßig skaliert. Das Deaktivieren der Eigenschaft „max-width“ behebt das Problem, wie sich bei der Verwendung von Firebug zeigt.
Um zu verhindern, dass Bootstrap-CSS Google Maps-Bilder beeinträchtigt, können Sie die folgende Lösung implementieren:
<code class="css">#mapCanvas img { max-width: none; }</code>
Von Durch Überschreiben des Bootstrap-CSS für Bilder im Kartencontainer (gekennzeichnet durch #mapCanvas) können Sie das normale Erscheinungsbild von Markierungsbildern wiederherstellen. Diese Lösung stellt sicher, dass Bootstrap-Stile keine Auswirkungen auf Google Maps-Bilder haben, sodass sowohl Bootstrap als auch Google Maps wie vorgesehen funktionieren.
Das obige ist der detaillierte Inhalt vonIst Ihr Google Maps-Bild durch Twitter Bootstrap verzerrt? Hier erfahren Sie, wie Sie das Problem lösen können.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!