Skalierung von <img> ?

[Ulli Horlacher]

Ich will Bilder so anzeigen, dass sie auf jeden Fall auf den Bildschirm
passen, aber gleichzeitig verhindern, dass kleine Bilder hochskaliert
werden.

Bisher verwende ich

<img style="max-height:800px;height:auto;width:auto;" src="$src">

Bei grossen Monitoren (bzw Browser Windows) verschwende ich so Platz, bei
kleinen passt das Bild nicht ganz drauf.


--
Ullrich Horlacher Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart E-Mail: horl...@tik.uni-stuttgart.de
Allmandring 30a Tel: ++49-711-68565868
70569 Stuttgart (Germany) WWW: http://www.tik.uni-stuttgart.de/

[Arno Welzel]

Ulli Horlacher:

> Ich will Bilder so anzeigen, dass sie auf jeden Fall auf den Bildschirm
> passen, aber gleichzeitig verhindern, dass kleine Bilder hochskaliert
> werden.
>
> Bisher verwende ich
>
> <img style="max-height:800px;height:auto;width:auto;" src="$src">
>
> Bei grossen Monitoren (bzw Browser Windows) verschwende ich so Platz, bei
> kleinen passt das Bild nicht ganz drauf.

Logisch - Du gibs eine maximale *Höhe* von 800px vor. Ob das reinpasst
oder nicht, hängt ja vom Bildschirm ab.

Die Lösung sind prozentuale Angaben und keine absoluten. Auch würde ich
die *Breite* vorgeben und nicht die Höhe, da die maximal Höhe von 100%
der hohe des Dokuments entspricht, in dem das Bild eingebunden ist, was
meist höhere ist, das der sichtbare Teil im Bildschirm. In der Breite
werden Dokumente aber üblicherweise auf den sichtbaren Viewport
begrenzt, wenn der Inhalt das zulässt.

Die Lösung wäre also:

<img style="max-width:100%; height:auto" src="$src" />

Bilder die kleiner als 100% des Viewports sind, werden auch nicht
hochskaliert.

Praktische Anwendung, siehe hier:

<https://arnowelzel.de/usb-3-0-heute>

Oder hier:

<https://arnowelzel.de/retro-high-end>

Bei letzterem kann man auch sehen, wie ein Bild mit weniger als 100% am
rechten Rand und von Text umflossen aussieht. Auch das wird je nach
Viewport-Größe angepasst.


--
Arno Welzel
https://arnowelzel.de

[Ulli Horlacher]

Arno Welzel <use...@arnowelzel.de> wrote:

> > Ich will Bilder so anzeigen, dass sie auf jeden Fall auf den Bildschirm
> > passen, aber gleichzeitig verhindern, dass kleine Bilder hochskaliert
> > werden.
> >
> > Bisher verwende ich
> >
> > <img style="max-height:800px;height:auto;width:auto;" src="$src">
> >
> > Bei grossen Monitoren (bzw Browser Windows) verschwende ich so Platz, bei
> > kleinen passt das Bild nicht ganz drauf.
>
> Logisch - Du gibs eine maximale *Höhe* von 800px vor. Ob das reinpasst
> oder nicht, hängt ja vom Bildschirm ab.

Ja, eben, so funktionierts schlecht. Deshalb such ich ja eine bessere
Loesung :-)

> Die Lösung sind prozentuale Angaben und keine absoluten. Auch würde ich
> die *Breite* vorgeben und nicht die Höhe, da die maximal Höhe von 100%
> der hohe des Dokuments entspricht, in dem das Bild eingebunden ist, was
> meist höhere ist, das der sichtbare Teil im Bildschirm. In der Breite
> werden Dokumente aber üblicherweise auf den sichtbaren Viewport
> begrenzt, wenn der Inhalt das zulässt.
>
> Die Lösung wäre also:
>
> <img style="max-width:100%; height:auto" src="$src" />

Das funktioniert leider nicht, da ich (auch) Bilder habe, die deutlich
hoeher als breit sind. Von der Breite her passen die also rein, aber
vertikal muss man scrollen. Genau DAS will ich aber verhindern.

Ich hab deinen Vorschlag mal eingebaut, das Resultat gefaellt mir nicht:

https://fex.rus.uni-stuttgart.de/fop/gDqbCUmv/jokes.zip
"browse images"

Dann Bild 5

Das passt zwar von der Breite her, nicht aber von der Hoehe.

[Marcel Mueller]

Am 30.10.20 um 08:32 schrieb Ulli Horlacher:

> Ich will Bilder so anzeigen, dass sie auf jeden Fall auf den Bildschirm
> passen, aber gleichzeitig verhindern, dass kleine Bilder hochskaliert
> werden.
>
> Bisher verwende ich
>
> <img style="max-height:800px;height:auto;width:auto;" src="$src">
>
> Bei grossen Monitoren (bzw Browser Windows) verschwende ich so Platz, bei
> kleinen passt das Bild nicht ganz drauf.

max-width: 100vw; max-height:100vh

Allerdings wirst Du vmtl. noch etwas Platz für Navigation oder Ränder
abziehen wollen:

max-width: calc( 100vw - 40px ); max-heightc: calc( 100vh - 40px )


Marcel

[Ulli Horlacher]

SUPER! DAS ist die Loesung! Danke!
vw/vh kannte ich gar nicht.
Das hab ich auch bei meiner Recherche zuvor nicht gefunden.

Ich hab jetzt:

<img style="max-width:80vw;max-height:80vh" src="$src">

Das passt fuer meine Anwendung, Beispiel:

https://fex.rus.uni-stuttgart.de/fop/gDqbCUmv/jokes.zip

[Arno Welzel]

Ulli Horlacher:

> Arno Welzel <use...@arnowelzel.de> wrote:
[...]

>> Die Lösung wäre also:
>>
>> <img style="max-width:100%; height:auto" src="$src" />
>
> Das funktioniert leider nicht, da ich (auch) Bilder habe, die deutlich
> hoeher als breit sind. Von der Breite her passen die also rein, aber
> vertikal muss man scrollen. Genau DAS will ich aber verhindern.

Das kannst Du aber nicht verhindern, solange das Bild in einem Dokument
ist, was insgesamt scrollbar ist.

CSS kann sich nur an den Großen umgebender Elemente orientieren. Du
musst also das Bild in einen Kasten einbinden, der seinerseits eine
maximale Höhe von 100% abzüglich weiterer Element innerhalb des
Viewports definiert.

> Ich hab deinen Vorschlag mal eingebaut, das Resultat gefaellt mir nicht:
>
> https://fex.rus.uni-stuttgart.de/fop/gDqbCUmv/jokes.zip
> "browse images"
>
> Dann Bild 5
>
> Das passt zwar von der Breite her, nicht aber von der Hoehe.

Bei mir schon:

<https://nextcloud.0x0c.de/s/2BaNkja8Nq7aWCi/preview>

Wenn das Fenster kleiner gezogen wird, rutscht der Text ein Stück nach
unten raus, aber das Bild wird dennoch kleiner:

<https://nextcloud.0x0c.de/s/LW5Yj6kiTtFJoiA/preview>

Du hast dafür angegeben: "max-width:80vw;max-height:80vh"

Ob aber 80% des Viewports ausreichen, um auch die übrigen Elemente um
das Bild herum anzuzeigen, hängt halt davon ab, wie groß der Viewport
insgesamt ist. Ich würde vermutlich versuchen, das Layout auf einem
Flex-Grid aufzubauen statt einer Tabelle, dann kann man solche Aspekte
leichter berücksichtigen.

Aber ein anderer Ansatz mit wenig Aufwand, der aber in älteren Browsern
u.U. nicht funktioniert:

"max-width:calc(100vw - 8em);max-height:calc(100vh - 10em)"

Das bedeutet übersetzt:

Maximal 100% breite abzüglich 8em für die Elemente neben dem Bild und
maximal 100% Höhe abzüglich der Elemente über und unter dem Bild.

Achtung - die Leerzeichen vor und nach dem Minus-Zeichen müssen so drin
sein!

Siehe dazu auch: <https://developer.mozilla.org/de/docs/Web/CSS/calc>

[Arno Welzel]

Ulli Horlacher:

> Marcel Mueller <news.5...@spamgourmet.org> wrote:
>> Am 30.10.20 um 08:32 schrieb Ulli Horlacher:
>>> Ich will Bilder so anzeigen, dass sie auf jeden Fall auf den Bildschirm
>>> passen, aber gleichzeitig verhindern, dass kleine Bilder hochskaliert
>>> werden.
>>>
>>> Bisher verwende ich
>>>
>>> <img style="max-height:800px;height:auto;width:auto;" src="$src">
>>>
>>> Bei grossen Monitoren (bzw Browser Windows) verschwende ich so Platz, bei
>>> kleinen passt das Bild nicht ganz drauf.
>>
>> max-width: 100vw; max-height:100vh
>>
>> Allerdings wirst Du vmtl. noch etwas Platz für Navigation oder Ränder
>> abziehen wollen:
>>
>> max-width: calc( 100vw - 40px ); max-heightc: calc( 100vh - 40px )
>
> SUPER! DAS ist die Loesung! Danke!
> vw/vh kannte ich gar nicht.
> Das hab ich auch bei meiner Recherche zuvor nicht gefunden.
>
> Ich hab jetzt:
>
> <img style="max-width:80vw;max-height:80vh" src="$src">
>
> Das passt fuer meine Anwendung, Beispiel:
>
> https://fex.rus.uni-stuttgart.de/fop/gDqbCUmv/jokes.zip

Nein, es passt nicht. Siehe mein anderes Posting. Du hast nicht calc()
verwendet, sondern einfach nur eine absolute Vorgabe, die aber nicht für
jede Bildschirmgröße funktioniert, wenn neben dem Bild auch noch andere
Elemente Platz finden müssen.

[Ulli Horlacher]

Arno Welzel <use...@arnowelzel.de> wrote:

> Du hast dafür angegeben: "max-width:80vw;max-height:80vh"
>
> Ob aber 80% des Viewports ausreichen, um auch die übrigen Elemente um
> das Bild herum anzuzeigen, hängt halt davon ab, wie groß der Viewport
> insgesamt ist. Ich würde vermutlich versuchen, das Layout auf einem
> Flex-Grid aufzubauen statt einer Tabelle, dann kann man solche Aspekte
> leichter berücksichtigen.

Flex-Grid sagt mir gar nichts, das ist bestimmt irgendein komplizierter
neumodischer Schnickschnack, irgendwas, was nach 2000 kam ;-)

> Aber ein anderer Ansatz mit wenig Aufwand, der aber in älteren Browsern
> u.U. nicht funktioniert:
>
> "max-width:calc(100vw - 8em);max-height:calc(100vh - 10em)"
>
> Das bedeutet übersetzt:
>
> Maximal 100% breite abzüglich 8em für die Elemente neben dem Bild und
> maximal 100% Höhe abzüglich der Elemente über und unter dem Bild.
>
> Achtung - die Leerzeichen vor und nach dem Minus-Zeichen müssen so drin
> sein!

Noch besser! Hab ich jetzt uebernommen! Sieht besser aus!

> Siehe dazu auch: <https://developer.mozilla.org/de/docs/Web/CSS/calc>

Das kannte ich auch nicht. Man lernt nie aus :-)

Danke an alle fuer die wertvollen Tipps!


Den HTML-Code generiere ich uebrigens via Perl-Skript, das wiederum von
einem selbstgeschriebenen Webserver gestartet wird. Alles SEHR speziell :-)

Die Test-Gallerie
https://fex.rus.uni-stuttgart.de/fop/gDqbCUmv/jokes.zip
Hab ich dabei so erzeugt:

fexsend -a jokes.zip * .

Damit kann ich (und alle User meiner Software) beliebige Bilderserien
veroeffentlichen mit nur einem Befehl.

[Peter J. Holzer]

On 2020-10-31 23:10, Ulli Horlacher <fram...@rus.uni-stuttgart.de> wrote:

> Arno Welzel <use...@arnowelzel.de> wrote:
>> Ich würde vermutlich versuchen, das Layout auf einem Flex-Grid
>> aufzubauen statt einer Tabelle, dann kann man solche Aspekte leichter
>> berücksichtigen.
>
> Flex-Grid sagt mir gar nichts, das ist bestimmt irgendein komplizierter
> neumodischer Schnickschnack, irgendwas, was nach 2000 kam ;-)

Sogar nach 2010 :-)

Und ja, Flex und Grid (das sind zwei verschiedene Dinge: Flex ist
eindimensional, Grid zweidimensional) sind ein bisschen kompliziert.
Aber wenn man sie mal verstanden hat, kann man damit relativ einfach
Layouts gestalten, die früher fürchterliche Hacks erfordert haben.

hp

[Ulli Horlacher]

Peter J. Holzer <hjp-u...@hjp.at> wrote:

> > Flex-Grid sagt mir gar nichts, das ist bestimmt irgendein komplizierter
> > neumodischer Schnickschnack, irgendwas, was nach 2000 kam ;-)
>

> Und ja, Flex und Grid (das sind zwei verschiedene Dinge: Flex ist
> eindimensional, Grid zweidimensional) sind ein bisschen kompliziert.
> Aber wenn man sie mal verstanden hat, kann man damit relativ einfach
> Layouts gestalten, die früher fürchterliche Hacks erfordert haben.

Ist das reines HTML oder braucht das Javagedoehns?
Mir ist ja schon CSS suspekt :-)

[Peter J. Holzer]

On 2020-11-02 17:33, Ulli Horlacher <fram...@rus.uni-stuttgart.de> wrote:
> Peter J. Holzer <hjp-u...@hjp.at> wrote:
>> Und ja, Flex und Grid (das sind zwei verschiedene Dinge: Flex ist
>> eindimensional, Grid zweidimensional) sind ein bisschen kompliziert.
>> Aber wenn man sie mal verstanden hat, kann man damit relativ einfach
>> Layouts gestalten, die früher fürchterliche Hacks erfordert haben.
>
> Ist das reines HTML oder braucht das Javagedoehns?
> Mir ist ja schon CSS suspekt :-)

Es ist CSS.

hp

[Thomas Hochstein]

Ulli Horlacher schrieb:

> Ist das reines HTML oder braucht das Javagedoehns?
> Mir ist ja schon CSS suspekt :-)

Reines HTML sollte nur Struktur enthalten, CSS sorgt dann für die Art
der Darstellung - mithin ist es CSS.