Zusammenfügen eines Bildes in HTML/CSS/JS

Ich bin gerade dabei, eine Web-App zu entwickeln, und als Teil davon muss ich in der Lage sein, Teile eines Bildes zu manipulieren, speziell die Tasten einer Trompete . Ich habe jedes Stück aus Photoshop ausgeschnitten, aber ich weiß nicht, wie man jeden Schlüssel mit der Trompete reaktionsschnell anordnet: Ich kann den Schlüssel mit absoluter Positionierung positionieren, aber wenn das Trompetenelement seine Größe verändert, reihen sich die Tasten nicht mehr aneinander. Irgendwelche Tipps?Zusammenfügen eines Bildes in HTML/CSS/JS

Quelle

2016-05-23 Austin Serio

Haben Sie über eine Imagemap nachgedacht? – Jhecht

Sie könnten% anstelle von Pixeln verwenden, um sie auszurichten – pandavenger

@Jhecht könnte in das –

Setzen Sie die Trompetenbilder auf prozentuale Breiten und wickeln Sie sie mit einem Container div mit den Eigenschaften min-width und max-width so ein, dass sie schrumpfen und wachsen und sich der Inhalt entsprechend anpasst.

Quelle

2016-05-23 00:22:48 designcise

Das Problem ist nicht, dass die Elemente nicht schrumpfen oder wachsen, es ist, dass sie nicht genau ausgerichtet bleiben, wo sie sein sollten Trompete, so dass sie verschoben aussehen –

@AustinSerio ohne auf den Code zu schauen, können wir nicht wirklich viel sagen. Benutzen Sie zufällig '' display: inline-block'' auf den Bildern? – designcise

Nein, bin ich nicht. Hier ist der Code: Position: absolut; links: 54,3%; Breite: 3%; oben: 50px; Das Problem ist, dass, wenn das Trompetenbild schrumpft, der Punkt, an dem der Schlüssel ausgerichtet werden muss, sich bewegt, wenn das Bild schrumpft, während der Schlüssel an der gleichen Stelle bleibt. Vielleicht gibt es einen besseren Weg, dies zu tun? Ich dachte daran, möglicherweise einen Tisch zu benutzen. –

Zusammenfügen eines Bildes in HTML/CSS/JS

Antwort

Verwandte Themen