Bild als Vollbild, aber nur wenn groß genug

[Klaus]

Hallo,

wie kann ich ein Bild nur dann im Vollbild (des Browsers) zeigen, wenn es von der Auflösung groß genug ist?
Ich habe ein DIV, dass die volle Größe des Browserfensters einnimmt. Darin möchte ich ein einziges Bild zentriert reinsetzen, das auf die volle Größe des DIV angezeigt werden soll, aber nur wenn die Auflösung des Bildes größer oder gleich der Auflösung des Browserfensters ist.
Das Problem ist, dass ältere Bilder eine geringere Auflösung haben als neuere und die Bilder sowohl im Hochformat als auch im Querformat vorliegen.

Kann ich das mit reinem CSS realisieren?

Im Moment wird jedes Bild mit den Originalabmessungen des Bildes gezeigt.

So sieht der HTML-Code aus:

  
<div id="photo_container">  
   <div id="theimage"><img src="<?=$bild;?>"></div>  
</div>  

So sieht mein CSS aus:

  
#photo_container {  
	position: absolute;  
	top: 0px;  
	left: 0px;  
	width: 100%;  
	height: 100%;  
	margin: 0 auto;  
    background-color:#000;  
}  
#theimage img {  
	width: 100%;  
	height: 100%;  
}  

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Ich habe ein DIV, dass die volle Größe des Browserfensters einnimmt.

Ein sicheres Zeichen dafür, dass das div überflüssig ist.

Darin möchte ich ein einziges Bild zentriert reinsetzen

Ist es Inhalt (dann ein img-Element) oder Ausschmückung (dann sollte es mit CSS als Hintergrundbild umgesetzt werden)?

das auf die volle Größe des DIV angezeigt werden soll

Das heißt was? Soll es die gesamte Fläche ausfüllen (also Teile des Bildes nicht sichtbar sein) oder soll das Bild vollständig zu sehen sein (also Bereiche des Browserfensters nicht ausgefüllt sein)?

aber nur wenn die Auflösung des Bildes größer oder gleich der Auflösung des Browserfensters ist.

Das Bild soll also bei Bedarf verkleinert, aber nciht vergrößert werden?

Qapla'

[Klaus]

Hallo,

Ich habe ein DIV, dass die volle Größe des Browserfensters einnimmt.

Ein sicheres Zeichen dafür, dass das div überflüssig ist.

Vielleicht wird die Notwendigkeit des DIVs klarer, wenn ich etwas weiter aushole:
Ich versuche gerade ein eigenes Bilderalbum zu realisieren. Das heisst, auf einer einzigen Seite werden die vorhandenen Alben dargstellt und auch die zu einem Album gehörenden Vorschaubilder.
Werden die Vorschaubilder angezeigt, wird der Bereich der vorhandenen Alben ausgeblendet.
Wird in auf eines der Vorschaubilder geklickt, wird auch der Bereich der Vorschaubilder ausgeblendet und nun soll das Bild in seiner ganzen Pracht angezeigt werden. Und zwar so groß, wie es das Browserfenster und die Auflösung hergibt.

Darin möchte ich ein einziges Bild zentriert reinsetzen

Ist es Inhalt (dann ein img-Element) oder Ausschmückung (dann sollte es mit CSS als Hintergrundbild umgesetzt werden)?

Ich würde es als Inhalt titulieren, dient es ja nicht zur Ausschmückung sondern zur gewünschten Anzeige.

das auf die volle Größe des DIV angezeigt werden soll

Das heißt was? Soll es die gesamte Fläche ausfüllen (also Teile des Bildes nicht sichtbar sein) oder soll das Bild vollständig zu sehen sein (also Bereiche des Browserfensters nicht ausgefüllt sein)?

Beispiele:
Das Bild hat 1024x768 und der sichtbare Bereich im Browser auch: Das Bild wird in Orginalgröße angezeigt.
Das Bild hat 1024x768 und das Browserfenster 1280x960: Das Bild wird in Originalgröße zentriert dargstellt, also nicht vergrößert. Um das Bild herum ist ein schwarzer Hintergrund.
Das Bild hat 1280x960 und das Browserfenster 1024x768: das Bild wird auf die Größe des Browserfensters verkleinert.

aber nur wenn die Auflösung des Bildes größer oder gleich der Auflösung des Browserfensters ist.

Das Bild soll also bei Bedarf verkleinert, aber nciht vergrößert werden?

Richtig, es muss i.d.R nur verkleinert werden oder kann in Originalgröße angezeigt werden. Es soll nicht vergrößert werden.

[Gunnar Bittersmann]

@@Klaus:

nuqneH

das auf die volle Größe des DIV angezeigt werden soll

Das heißt was? Soll es die gesamte Fläche ausfüllen (also Teile des Bildes nicht sichtbar sein) oder soll das Bild vollständig zu sehen sein (also Bereiche des Browserfensters nicht ausgefüllt sein)?

Beispiele:
Das Bild hat 1024x768 und der sichtbare Bereich im Browser auch: Das Bild wird in Orginalgröße angezeigt.
Das Bild hat 1024x768 und das Browserfenster 1280x960: Das Bild wird in Originalgröße zentriert dargstellt, also nicht vergrößert. Um das Bild herum ist ein schwarzer Hintergrund.
Das Bild hat 1280x960 und das Browserfenster 1024x768: das Bild wird auf die Größe des Browserfensters verkleinert.

Du hast die Frage nicht beantwortet.

Angenommen, das Bild ist 1024 × 1536 Pixel groß, das div (nehmen wir mal an, es wäre sinnvoll) 1024 × 768. Soll das Bild nun in Originalgröße dargestellt den ganzen Bereich ausfüllen (wobei Teile des Bildes nicht sichtbar wären) oder soll es auf 512 × 768 verkleinert werden?

Der zweite Fall wäre mit '#photo_container img { max-width: 100%; max-height: 100% }' einfach gelöst.

Qapla'

[Klaus]

Angenommen, das Bild ist 1024 × 1536 Pixel groß, das div (nehmen wir mal an, es wäre sinnvoll) 1024 × 768. Soll das Bild nun in Originalgröße dargestellt den ganzen Bereich ausfüllen (wobei Teile des Bildes nicht sichtbar wären) oder soll es auf 512 × 768 verkleinert werden?

Das Bild soll dann verkleinert werden.
Es soll immer das gesamte Bild sichtbar sein, so groß wie möglich, aber nicht vergrößert.

Der zweite Fall wäre mit '#photo_container img { max-width: 100%; max-height: 100% }' einfach gelöst.

Wäre zu schön gewesen, funktioniert auch, wenn ich das Fenster in der Breite verändere, aber leider nicht, wenn ich die Höhe des Fensters verändere.

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Wäre zu schön gewesen, funktioniert auch, wenn ich das Fenster in der Breite verändere, aber leider nicht, wenn ich die Höhe des Fensters verändere.

Das wird wohl daran liegen, dass dein div nicht die Höhe des Browserfensters hat.

Qapla'

[Klaus]

Das wird wohl daran liegen, dass dein div nicht die Höhe des Browserfensters hat.

Hätte ich nicht mit der Eigenschaft

  
position:absolute;  
width: 100%;  
height: 100%;  

sicherstellen müssen, dass das DIV die Höhe des Browserfensters erhält?
Und wenn nicht 100% sondern z.B. 120% bekommen hat oder auch 1200px, hätte dann nicht dennoch das Ändern der Fensterhöhe eine Veränderung bewirken müssen?

[Quincunx]

Hallo,

schau dir das Beispiel einmal an.
So passen sich zumindest große Bilder immer im Browserfenster an. Für passende oder kleinere Bilder fehlt noch das vertikale zentrieren.

gruesse qx

[Klaus]

schau dir das Beispiel einmal an.
So passen sich zumindest große Bilder immer im Browserfenster an. Für passende oder kleinere Bilder fehlt noch das vertikale zentrieren.

Danke für das Beispiel. Also nicht so ganz über CSS alleine gelöst, aber ok.
Funktioniert jetzt, auch zentriert.

Gruß,

Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Danke für das Beispiel. Also nicht so ganz über CSS alleine gelöst

Und warum nicht?

aber ok. Funktioniert jetzt, auch zentriert.

Funktioniert auch „so ganz über CSS alleine“, wie von mir beschrieben. Auch zentriert.

Qapla'

[Klaus]

Danke für das Beispiel. Also nicht so ganz über CSS alleine gelöst

Und warum nicht?

aber ok. Funktioniert jetzt, auch zentriert.

Funktioniert auch „so ganz über CSS alleine“, wie von mir beschrieben. Auch zentriert.

Naja, was auch immer ich versucht hatte, die Höhe wurde nie korrekt dargestellt.
Jetzt funktioniert es, wenn vielleicht auch nicht mit optimalem Code.

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Funktioniert auch „so ganz über CSS alleine“, wie von mir beschrieben. Auch zentriert.

Naja, was auch immer ich versucht hatte, die Höhe wurde nie korrekt dargestellt.

Offenbar nicht das Richtige. Look ma, no JS.

Jetzt funktioniert es, wenn vielleicht auch nicht mit optimalem Code.

Beim Einsatz von JavaScript zur Darstellung würde ich eher nicht von „funktioniert“ sprechen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Naja, was auch immer ich versucht hatte, die Höhe wurde nie korrekt dargestellt.

Offenbar nicht das Richtige. Look ma, no JS.

Vielleicht fehlt noch die vertikale Zentrierung?

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Vielleicht fehlt noch die vertikale Zentrierung?

War die gewünscht? Bei Quincunx’ JS-Gefrickel gab’s auch keine.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Vielleicht fehlt noch die vertikale Zentrierung?

War die gewünscht? Bei Quincunx’ JS-Gefrickel gab’s auch keine.

Nicht, dass ich wüsste, aber ich würde mir das anhand der Beschreibung so vorstellen.

PS: figure wäre imo der besser geeignete Container.

Matthias

[Quincunx]

@@Matthias,

Vielleicht fehlt noch die vertikale Zentrierung?

War die gewünscht? Bei Quincunx’ JS-Gefrickel gab’s auch keine.

Nicht, dass ich wüsste, aber ich würde mir das anhand der Beschreibung so vorstellen.

PS: figure wäre imo der besser geeignete Container.

Habe meinen „Vorschlag“ überdacht und das Beispiel (jetzt kleineres Bildformat) mit Gunnars CSS-Lösung kombiniert, wobei das Image jetzt auch vertikal (mittels JS-Gefrickel) zentriert wird. Falls das auch ohne JS möglich ist, Super!… nur mir ist auch nach längerem herumprobieren kein Weg dazu eingefallen.

gruesse qx

[Gunnar Bittersmann]

@@Quincunx:

nuqneH

Habe meinen „Vorschlag“ überdacht und das Beispiel (jetzt kleineres Bildformat) mit Gunnars CSS-Lösung kombiniert, wobei das Image jetzt auch vertikal (mittels JS-Gefrickel) zentriert wird.

Das machst du so:
var pos = Math.round( (parseInt(innerHeight)/2)-(parseInt(img.obj.height)/2) );

Wozu parseInt()? window.innerHeight und img.obj.height sind schon numerische Werte.

Falls das auch ohne JS möglich ist, Super!… nur mir ist auch nach längerem herumprobieren kein Weg dazu eingefallen.

Sicher ist es das. Man kann auch in CSS rechnen – mit calc().

window.innerHeight / 2 sind 50vh.

img.obj.height / 2 sind 50% – wenn sich Prozente auf die Höhe des Bildes beziehen.

Was sie bei margin* nicht tun. Aber bei translate*().

Also einfach img { transform: translateY(calc(50vh - 50%)) }.

Oder img { transform: translate3d(0, calc(50vh - 50%), 0) }, damit’s über die GPU läuft. (Oder tun das 2D-Transformationen mittlerweile auch?)

Fertig. CSS – entdecke die Möglichkeiten!

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Fertig. CSS – entdecke die Möglichkeiten!

Wenn man schon translate() einsetzt, kann man natürlich damit die horizontale Zentrierung gleich mit erledigen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Wenn man schon translate() einsetzt, kann man natürlich damit die horizontale Zentrierung gleich mit erledigen.

404

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Wenn man schon translate() einsetzt, kann man natürlich damit die horizontale Zentrierung gleich mit erledigen.

404

Jetzt nicht mehr.

Qapla'

[Quincunx]

@@Gunnar:

Wozu parseInt()? window.innerHeight und img.obj.height sind schon numerische Werte.

ist überflüssig; noch übriggeblieben vom herumtesten.

Fertig. CSS – entdecke die Möglichkeiten!

und Danke für dieses transform: translate3d(0, calc(50vh - 50%), 0), ist mir bisher entgangen, kann ich aber auch gut gebrauchen…!

Habe dein Beispiel mir einer kleineren Grafik-Version umgesetzt.

gruesse qx

[Claus]

wie kann ich ein Bild nur dann im Vollbild (des Browsers) zeigen, wenn es von der Auflösung groß genug ist?

Per Javascript in ein Objekt laden, Maße auslesen und danach entscheiden.

Kann ich das mit reinem CSS realisieren?

Gar nicht. Meines Wissens nach ist der Fall, dass der Autor zwar auf die Seitengestaltung Einfluss nehmen kann, aber nicht auf die für die Gestaltung verwendeten Bilder, nicht vorgesehen.

So sieht der HTML-Code aus:

<div id="photo_container">
   <div id="theimage"><img src="<?=$bild;?>"></div>
</div>

>   
> So sieht mein CSS aus:  
> ~~~css
  

> #photo_container {  
> 	position: absolute;  
> 	top: 0px;  
> 	left: 0px;  
> 	width: 100%;  
> 	height: 100%;  
> 	margin: 0 auto;  
>     background-color:#000;  
> }  
> #theimage img {  
> 	width: 100%;  
> 	height: 100%;  
> }  
> 

Falls du da der Übersichtlichkeit halber nicht irgendwas weggelassen hast, ist zumindest das innere <div> gänzlich überflüssig, möglicherweise auch das äußere. Das innere sprichst du überhaupt nicht an und alle CSS-Eigenschaften des äußeren kannst du auch dem <img> direkt zuweisen und seine Einbettung mittels display:block identisch dem eines <div> erzwingen. Aber dies nur nebenbei.

[Klaus]

Falls du da der Übersichtlichkeit halber nicht irgendwas weggelassen hast, ist zumindest das innere <div> gänzlich überflüssig, möglicherweise auch das äußere. Das innere sprichst du überhaupt nicht an und alle CSS-Eigenschaften des äußeren kannst du auch dem <img> direkt zuweisen und seine Einbettung mittels display:block identisch dem eines <div> erzwingen. Aber dies nur nebenbei.

Ich habe der Übersicht halber die Navigation, das Loader-Div und den Header weggelassen, die aber auf der Seite mit position:absolut; dargestellt werden.
Das innere DIV kann aber wahrscheinlich dennoch entfallen.

[Gunnar Bittersmann]

@@Claus:

nuqneH

Kann ich das mit reinem CSS realisieren?

Gar nicht.

Wäre blöd, wenn’s so wäre. Ist es aber nicht.

Meines Wissens nach ist der Fall, dass der Autor zwar auf die Seitengestaltung Einfluss nehmen kann, aber nicht auf die für die Gestaltung verwendeten Bilder, nicht vorgesehen.

Mit bspw. 'width: 100%' und 'height: 100%' nimmst du Einfluss auf die Gestaltung der Bilder.

Qapla'

[Claus]

Kann ich das mit reinem CSS realisieren?

Gar nicht.

Wäre blöd, wenn’s so wäre. Ist es aber nicht.

Was genau hast du an "Bild als Vollbild, aber nur, wenn groß genug" nicht verstanden? Oder, andersrum, welche CSS-Eigenschaft sorgt dafür, dass große Bilder zwar auf die vorhandene Fläche verkleinert werden, aber kleine Bilder nicht vergrößert?

[Gunnar Bittersmann]

@@Claus:

nuqneH

Was genau hast du an "Bild als Vollbild, aber nur, wenn groß genug" nicht verstanden?

Gar nichts nicht verstanden. (Außer dem Unverständlichen.)

Oder, andersrum, welche CSS-Eigenschaft sorgt dafür, dass große Bilder zwar auf die vorhandene Fläche verkleinert werden, aber kleine Bilder nicht vergrößert?

Keine einzelne. Mit zweien ist das einfach gelöst.

Qapla'