Image-Mapping mit verschiedenen Bildschirmgrößen.

Question

Also Leute, wenn du Code willst, kann ich es liefern! Ich habe eine Website für Planeten erstellt, auf der ein großes Foto von Planeten zu sehen ist, und ich habe darauf ein Bild-Mapping (von W3Schools) verwendet. Problem ist, dass, wenn ich die gleiche Website auf einem größeren Laptop öffne, das Bild größer wird, da ich Bootstrap benutze und Image mapping wird vermasselt. Gibt es dafür eine Lösung? Kann ich die Bildzuordnung für alle Bildschirme verwenden?

Answer 1

Sie müssen die maximale Breite für Ihr Bild-Tag festlegen, damit es nicht so groß wird wie es geht. Sie müssen auch die @ media-Abfrage für die Bildschirmgröße festlegen, auf der Sie sich befinden. Sie können Ihr Bild aber auch auf einen Prozentsatz festlegen, wie groß der Container ist. (z.B.) Breite: 50%;

Zum Beispiel:

//Desktop or Landscape Tablet Screen Size 
@media all and (min-width: 981px) { 
img { 
max-width: 400px; 
} 
}