Hier sind einige Titeloptionen, die auf ein Frageformat abzielen und den Inhalt widerspiegeln: * Durch Bootstrap verzerrte Google Maps-Bilder: Wie kann das Problem mit der maximalen Breite behoben werden? * Warum sind meine Google Maps-Bilder Ske

Google Maps-Verzerrung durch Twitter Bootstrap-CSS

Bei der gleichzeitigen Verwendung von Twitter Bootstrap und Google Maps werden Bilder in der Karte, wie z. B. Markierungen, kann verzerrt werden. Dieses Problem entsteht aufgrund des in Bootstrap vorhandenen CSS-Stils.

Die spezifische CSS-Regel, die für diese Verzerrung verantwortlich ist, ist die Eigenschaft „max-width“, die auf alle Bilder auf folgende Weise angewendet wird:

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

Wenn diese Eigenschaft auf Kartenbilder angewendet wird, beschränkt sie deren maximale Breite auf den verfügbaren Platz auf der Seite. Dadurch werden die Bilder verzerrt.

Um dieses Problem zu beheben, können wir die Eigenschaft „max-width“ für Google Maps-Bilder selektiv überschreiben. In Bootstrap 2.0 kann der folgende CSS-Code verwendet werden:

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

Durch die Anwendung dieser Überschreibung auf das Map-Canvas-Element (#mapCanvas) stellen wir sicher, dass die max-width-Eigenschaft keine Auswirkungen auf die Bilder innerhalb hat Google Map. Dadurch können die Bilder korrekt und ohne Verzerrung angezeigt werden.

Das obige ist der detaillierte Inhalt vonHier sind einige Titeloptionen, die auf ein Frageformat abzielen und den Inhalt widerspiegeln: * Durch Bootstrap verzerrte Google Maps-Bilder: Wie kann das Problem mit der maximalen Breite behoben werden? * Warum sind meine Google Maps-Bilder Ske. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!