TWebBrowser und HighDpi

[TM6]

Die Fonts habe ich zwar hinbekommen, kämpfe aber noch mit Grafiken.
Ich habe auf selfhtml noch etwas nachgelesen, aber viel schlauer bin ich da nicht geworden.

Aktuell integriere ich eine Grafik so:

Code:

<img src="grafik.svg" align="middle" height="24"/>

In so einem Fall wird diese aber nicht vergrößert, wenn ich sie (bzw. das Form mit dem tWebBrowser) von einem Monitor auf den anderen verschiebe.
Was übersehe ich hier?

[Delphi.Narium]

height=24 heißt halt, dass das Bild bitteschön 24 (ja was denn) groß sein soll. Der Browser hat also keinerlei Veranlassung das zu ändern.

Such bitte mal nach css height oder CSS Demo: height.

Hinter die 24 gehört eigentlich noch eine Angabe zu der Einheit, auf die sich die Größenangabe bezieht, fehlt die, dann macht der Browser das, was seine Programmiererinnen und Programmierer für richtig oder als Default angesehen haben. Das Verhalten bei dieser CSS-Angabe muss also nicht bei allen Browsern und deren Versionen identisch sein.

Weitere Möglichkeiten für die Größenangabe:

Code:

em ; Orientiert sich an der Schriftgröße.
px ; Höhenangabe in Pixel.
auto ; Der Browser passt die Höhe automatisch an die Umgebung an.
Prozentwert ; Prozentangabe, anhand der eine Skalierung erfolgt.
pt ; Höhernangabe in Punkten.
cm ; Höhenangabe in Zentimeter.
in : Höhenangabe in Zoll.
mm : Höhenangabe in Millimeter.

Weiteres unter em, px, pt, cm, in …

Apropos: height für die Höhenangabe. Und was ist mit der Breite? Zufall? Oder der Browser wird's schon richten?

Eine DPI-Änderung hat übrigens keinen Einfluss auf die Angaben in den Styles. Über geänderte Größenangaben im CSS wirst Du (höchstwahrscheinlich) nicht zum Ziel kommen.

Eventuell findest Du bei der "Konkurenz" ja weiterführende Infos: Is there a way to use DPI in css media queries instead of px

Keine Ahnung, ob davon jetzt irgendwas wirklich eine weiterführende Info ist. Aber eventuell lockert sich der Nebel, in dem Du momentan rumstochern musst.

[Bernhard Geyer]

AFAIK baut hier der IE (wenn man ihn per TWebbrowser integriert) murks.
Man muss "von außen" nachhelfen, das er da richtig Arbeite.
ist schon aber ein paar Jahre her, als ich da was suchen musste, da wir ein Problem damit hatten.

Ich würde eh auf EdgeBrowser wechseln und das Tote Pferd IE (TWebbrowser im IE-Modus) nicht weiter nutzen.

[mytbo]

Zitat von TM6:

Aktuell integriere ich eine Grafik so:

Code:

<img src="grafik.svg" align="middle" height="24"/>

Es kommt darauf an, was du genau machen willst. Vielleicht reicht schon Folgendes:

Code:

<img style="display: block; margin-left: auto; margin-right: auto; width: 24vw;" src="grafik.svg" />

Wenn du mehr Flexibilität brauchst, baue es mit einem Container. Beispiel:

Code:

<div style="margin: auto; width: 80%;">
  <img style="width: auto; height: auto; max-width: 100%; max-height: 80vh;" src="grafik.svg" />
</div>

Zum Schreiben von HTML-Quellcode ist der VSC Editor mit seiner Autovervollständigung hilfreich. Das Beispiel-Programm aus dem Artikel, die Kombination aus Mustache Template-Engine und der Fähigkeit, JSON-Daten aus unterschiedlichen Quellen zu laden, ist praktisch beim Testen.

PS: Vermutlich ist es hier überdimensioniert, durch Verwendung von CSS-Frameworks wie Bootstrap oder Bulma erleichtert sich die Layout-Arbeit.

Bis bald...
Thomas

[TM6]

Danke!
Das Beispiel von mytbo hat mir sehr weiter geholfen.
Ich brauchte nur eine Grafik vor einem Text und mit display: inline hat das dann alles geklappt.