CSS Auflösung vs. transform: scale()

[SaxnPaule]

Hallo Community,

ich stehe mal wieder vor einem Problem, bei dessen Lösung ich auf Hilfe angewiesen bin.

Ich habe ein div mit spezifischer Größe. Nehmen wir an 320x240px.
Darin ist ein img mit einer ursprünglichen Auflösung von 1280x960px.

Das Bild wird in voller Größe an den Browser übertragen und dann entsprechend der Div Größe verkleinert. Alles gut soweit.

Wende ich jetzt ein transform: scale(>1.0) auf das div oder das img an, wird das Bild extrem unscharf, da es von der verkleinerten Auflösung (320x240) ausgeht und nicht von der ursprünglichen Auflösung.

Da die Bilder größtenteils Text beinhalten, ist das ein untragbarer Zustand.

An den Rahmenbedingungen kann ich leider nichts ändern. Fix ist:

• Mobile device mit variabler Auflösung. Das Wrapper div passt sich je nach Device an. Geht bei 320x568 los.
• Zoom per Fingergeste mittels transform: scale()
• Bilder im jpg Format mit jeder Menge Text

Was ich (bis zu einem gewissen Grad) in der Hand habe ist die Struktur außerhalb des Wrapper divs.


Gibt es eine Lösung für das Problem?

 

[benneq]

Wir wäre es, wenn du das div einfach per width & height vergrößerst? Dann sollte das Bild im div auch jedes mal neuberechnet werden.

Oder alternativ: Erst per scale vergrößern (unscharf), und wenn der User fertig ist mit dem Zoomen (bzw. mit throttle immer wieder zwischendurch), wird die die Größe vom div ausgelesen und dann per width & height gesetzt.

Ooooder ein Listener auf's div packen, der dann entsprechend das Bild "aktualisiert" (wie genau das funktioniert, müsste man mal ausprobieren)

 

[SaxnPaule]

Ja, das wäre eine Möglichkeit. Ich bin aber leider an transform: scale() gebunden, da die eingesetzte Bibliothek das Zooming der Elemente eben damit bewerkstelligt. Die Bibliothek ist vorgegeben, daran kann ich leider nichts ändern.

Ich kann aber bestimmen, welches DOM Element gezoomt werden soll und habe alle Freiheiten was CSS angeht.

 

[benneq]

Und welche Lib ist es? Vielleicht hilft da ja weiter bei der Lösungssuche.

 

[SaxnPaule]

https://github.com/cubiq/iscroll

Ich weiß, es gibt tausend andere, aber es muss leider diese sein.