HTML (CSS) Bild horizontal und vertikal auf Bildschirm/Window zentrieren

cumulonimbus8 · 30. März 2021

Moin!

Mir kommt es so vor als würden simpelste Dinge zu einer Herkulesaufgabe werden.

Ganz bescheiden wollte ich ein Bild vertikal und horizontal, also einfach gesagt mittig, in der zur Verfügung stehenden Fläche (!) anordnen. Auf die Senkrechte ist ja kein Problem. Aber wie geht waagerecht in die Mitte?

Ein allgemeiner Hintergrund ist mit CSS und dort body leicht erledigt.
Etwas de luxe wäre ein kleiner Rahmen um das Bild. Dieses ist etwas ungünstig gestaltet und soll (Denksportaufgabe) nicht verändert werden. Die Dimensionen sowie die Breite des »Rahmens« wären als Zahlen vorhanden, der Rahmen muss aber noch seine Färbung bekommen.

Eigentlich äußerst einfach. Aber es will nicht.

CSS:

#bild{
 margin:auto;
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
}

nebst

HTML:

<body>
<img id="bild"src="./bilder/Bild.png">
</body>

das ich m Web fand zentriert das Bild zwar erfolgreich, aber ein «Rahmen»?

Nein, ich würde gerne auf gewisse Tricksereien verzichten.

HTML:

<body>
<img id="bild"src="./bilder/Rahmen330x330.png">
<img id="bild"src="./bilder/Bild300x300.png">
</body>

hilft nur bedingt da ich den «Rahmen» gerne mit CSS optisch anfassen möchte.

Sollte so was Simples denn wirklich so komplex ausufern?

CN8

Joshinator · 30. März 2021

Nutz https://developer.mozilla.org/de/docs/Web/CSS/object-fit, quasi das background-size: cover für Imgs.
Beim Rahmen kann ich nicht so ganz folgen, aber wenn der Rahmen auf dem Bild ist wirst du um verschiedene Bilder mit unterschiedlichen Seitenverhältnissen nicht kommen.

cumulonimbus8 · 30. März 2021

Das habe ich mehr überflogen…
Mein Bild soll zentriert, aber nicht skaliert werden (id est: so groß bleiben wie es ist), egal wie groß das Window, also die nutzbare Browserfläche, drumrum ausfällt.
Meiner Erinnerung nach ist doch cover = ausfüllen = skalieren?!

CN8

Dalek · 30. März 2021

Für modernes CSS einfach Flexbox lernen, das ersetzt die meisten Hacks die man früher verwendet hat und ist dadurch einfacher zu verstehen.

Für Rahmen gibt es das "border" CSS Attribut, entweder einfach auf das img tag oder auf ein div drumherum.

Joshinator · 30. März 2021

Wenn dein Bild von oben links nach unten rechts soll und es nicht skaliert werden soll, dann muss es zwangsweise verzogen werden. Oder du erstellt für jedes Seitenverhältnis ein Bild.

Mit Cover wird das Seitenverhältnis beibehalten, wenn dein Bild 1000x1000 ist und der Monitor 2000x1000 dann deckt das Bild den Monitor ab und die 500px oben und unten werden nicht angezeigt.

Bei fill bleibt das Bild bei 1000x1000, Seitenverhältnis wird beibehalten und du hast links und rechts 500px frei.

Standardmäßig würde das 1000x1000 Bild auf 2000x1000 gezogen, dann siehst du das gesamte Bild aber eben verzogen.

Ein Beispielbild wie es aussehen soll würde mehr helfen, habe nicht 100%ig verstanden was genau du mit dem Bild und dem Rahmen willst.

cumulonimbus8 · 30. März 2021

Dalek schrieb:
Für Rahmen gibt es das "border" CSS Attribut, entweder einfach auf das img tag oder auf ein div drumherum.

Dann liefere doch mal einen Code. Das DIV z.B. müsste ja auch zentriert sein… Wohin die Border damit sie mit zentriert wird?

Was kann eigentlich an den Begriffen Bild, Rahmen und ›nutzbarer‹ Fläche so schwer sein?!
Also bitte, ein Bild.

In diesem… Fenster… soll das Bild (mit künstlichem Rahmen) mittig angeordnet werden. Kopf und Menü sind qaasi statisch und ergeben nach Monitor und Browserfenster an sich (wenn nicht maximiert) die bewusste freie Nutzfläche.
All das ist nicht so einfach. Tabellen scheitern an der Höhe, jedes Objekt wie DIV muss als Conatinerelement schon selbst zentriert sein und dann das was da drin ist auch gegenüber diesem Container zentriert sein - der wiederum auf sein Innenleben Rücksicht nehmen muss um sich mit dem Window zu arrangieren.

@ Joshinator
Kann sein, dass ich fill, contain, cover… verwürfelt habe; ich habe damit früher mal was versucht, ist länger her.

CN8

netzgestaltung · 30. März 2021

Hi,

die werte cover, contain usw zählen nur für hintergrundbilder.

Früher war vor allem vertikales Zentrieren von Elementen eher schwierig.
Das geht nun mit "flexbox"

CSS:

body{
  display:flex;
  align-content:center;
  align-items:center;
  justify-content:center;
}
img{
  display:block;
  max-width:100%;
  height:auto;
  margin:20px;
}
#bild{
  border:15px solid #123456;
}

Display:Flex habe ich noch nie am Body Element probiert, da muß ev noch ein Div oder sonst was rein und der bekommt die Werte statt dem Body.

Joshinator · 30. März 2021

Dann Versuch das:

CSS:

#gruenner-div {
  position: relative;
  /* height & width das der Div den passenden Platz einnimmt */
}

#gruenner-div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-height: 100%
  border: 2px solid red;
}

Damit positionierst du das Bild mittig (mit dem translate sorgst du dafür dass das Bild um 50% seiner Breite nach links und 50% der Höhe nach oben verschoben wird). Ist die "dynamische Version" von "left: 50% - 50% Breite des Bilds".

Dann sagst du dem Bild das es maximal 100% hoch oder breit sein darf, so behälst du das Seitenverhältnis ohne dass das Bild außerhalb des Divs wächst.

netzgestaltung schrieb:
die werte cover, contain usw zählen nur für hintergrundbilder

Und eben object-fit

cumulonimbus8 · 30. März 2021

Das Ganze könnte zu einem besonderen Albtraum werden.

Zunächst hatte ich bis eben den Code von Netzgestaltung ausprobiert. Und letztlich alles wieder gestrichen bis auf den border im #bild (dem ich meinem Code oben hinzufügte. → der Hinweis mit border nützt nichts wenn nicht angegeben ist wo er korrekt zu platzieren Ist, img, was ich gar nicht einsetze, oder eben #bild.

Damit hat der Rahmen, border, das eine Problem gelöst. Das andere verbleibt bei der von mir gefundenen.

@ Joshinator
«Dann Versuch das:» → was recht sinnfrei Ist wenn du nicht angibst wie konkret die Konstruktion in HTML ausfallen soll… Body, Div, Img /Div, /Body? Der Div Ist offenbar ID=gruenner-div.

Damit müsste ich mal probieren, bei etwas mehr Ruhe als im Moment. Vielleicht ist dieser Code in bestimmter Weise nützlicher als der den ich gefunden hatte.

«Und eben object-fit»
Ist halt zu lange her; ging auch um eine andere Sache. Es kam, meine ich, dann was anderes dazwischen und ich habe mit anderen Mitteln was basteln können. Aber ein Strecken und Füllen war da schon im Spiel. In meinem Falle hier dachte ich aber nicht an Optionen dieser Sorte

Mein Problemchen sollte nur ein (funktionaler) Platzhalter sein (eine Dummy-Page) schön zentriert.
Für komplexere Seiten missfällt mir im Bauch der beispielhafte Zugriff auf das img; analog einer Anfrage getroffene Voreinstellungen für z.B. td fallweise unterdrücken zu müssen.

Basteln wir also mal in Ruhe weiter,
CN8

netzgestaltung · 30. März 2021

ich hab das hier mal fertig ausgearbeitet.
Ohne lebendem Objekt ist das einfach nicht so gut darstellbar:
https://jsfiddle.net/w2gjLxen/10/

img nutzt du natürlich als Element.
der img selector gilt für alle bilder, der #bild nur für das mit der entsprechenden ID

hier noch die referenz für flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

netzgestaltung · 31. März 2021

ich hab hier jetzt nochmal alles durchgelesen aber entgegen deinem beispielcode willst du das bild vermutlich nicht über das ganze fenster sondern in einem 2-Spalten layout unterbringen. Dann ersetze bei meinem beispielcode die vw und vh angaben mit % oder poste noch das grundgerüst der spaltenanordnung bitte.

Da gibts oft alte spezialitäten die seltame sympthome zeigen, zb clearfixes bzw pseudo-elemente und flex.

object-fit kannte ich noch gar nicht^^ klingt ja spannend und könnte für reine bild-elemente ganz praktisch sein.

cumulonimbus8 · 31. März 2021

Ein großes Dankeschön für alle Tipps.

Bemerkung: ich weiß schon wie <img id="bild" …> funktionieren, aber ich bin nie recht begeistert wenn ich ein zentrales Tag wie img global (CSS-File für alle Pages) beeinflusse, selbst lokal (CSS für diese eine Page).

netzgestaltung schrieb:
aber entgegen deinem beispielcode

Welcher ist gmeint? Mein (zu schrecklich simpler) Code zentriet ein einfaches Bild horizontal wie vertikal.
Das Bild (ScreenSjot) stellt allerdings 3 Frames dar (Oben quer, Links - Titel und Menü - sowie Rechts). Das ist altbacken (wörtlich)… Die Crux die mich schon früher beschäftigte (hatte ich da scjon mit cover· contain… gebastelt?) ist zumindest des sichtbare (!) Fenster auszufüllen und als Begrenzung aufzufassen; in dem Falle war das aber eine normale Page die maximal mit DIVs aufgebaut wurde.

Der Rahmen ums Ganze, die 3 Frames [ohne Anspruch auf ›das geht doch anders besser‹], das globale CSS lassen wir hier mal weg.

HTML:

<html>
<head>
<link rel="shortcut icon" href="myeta.ico">
<title>CN8 Homepage</title>
<meta name="author" content="MyEta">
<meta name="robots" content="none">
</head>
<frameset frameborder="0" framespacing="0" rows="140,*">
<frame name="logo" src="logo.htm" noresize>
<frameset frameborder="0" framespacing="0" cols="20%,80%">
  <frame name="inhaltsspalte" src="inhaltsspalte.htm" noresize>
  <frame name="hauptframe" src="uebersicht.htm">
  <noframes>
  <!-- … -->
  </noframes>
  </frameset>
</frameset>
</html>

Und hier der Code für das besagte Bild der auf Klick in den "hauptframe" geladen wird. "logo" und "inhaltsspalte" sind gegen oben|links festgenmauert, damit ist der "hauptframe" in beiden Dimensionen dynamisch.

Code:

<html>
<head>
<title>CN8 Homepage - Im Umbau</title>
<link rel="stylesheet" type="text/css" href="./css/imumbau.css">
</head>
<body>
<img id="bild"src="./bilder/ImUmbau.png">
</body>
</html>

imumbau.css

CSS:

body{
background-image:linear-gradient([I]--lassen wir lieber mal weg--[/I]);
}
#bild{
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
border:15px solid #ffffff;
}

Das genügt das Bild imUmbauPNG im "hauptframe" zu zentrieren, wie groß er auch ausfällt.

CN8

netzgestaltung · 31. März 2021

also in diesem fall sollte es mit den vw/h angaben funktionieren, da jsfiddle ja ähnlich aufgebaut ist und die frames als viewport anerkannt werden.

hast du mein beispiel angesehen und was meinst du dazu (beachte das dort schon /10 dabei steht ;-) )? Habe ich etwas falsch verstanden oder sieht das richtig aus?

die angaben für img sind dort, damit das beispiel funktioniert, denn vermutlich benötigst du die angaben in deinem projekt nicht, wenn es dazu schon was gibt. das mußt du dann vergleichen. Ich hab auch noch kommentare angefügt damit du dir daraus ziehen kannst was du benötigst.

du kannst auch wahlweise von img nach #bild verschieben, ich sehe da überhaupt kein problem.

die angaben zur body höhe und margin sind natürlich ebenfalls fraglich und jetzt einmal fürs beispiel drin.

cumulonimbus8 · 31. März 2021

Das besagte Beispiel überrollt mich.

Es ist viel zu… wertig… universell… für meine einfache Aufgabe, Wobei ich eben bemerken will, dass schon recht viel Aufwand zu leisten ist (m)eine simple Sache umzusetzen. HTML und CSS können viel, aber meinem Gefühl nach scheitern sie häufig an praktischen Kleinigkeiten.
Etwa ViewPort. Beim Lesen zu Syntax kam ich heute bei Maßnanaaben vorbei. U.U. hätte mir die Einheit vw helfen können. Aber die erfasst offenbar nicht den Frame sondern das ganze Konstrukt. Auch damit ließ sich dem Bild nicht beikommen…

CN8

netzgestaltung · 31. März 2021

dann versuch es bitte mit Prozent stattdessen. Das zentrieren ist halt immer von der Leinwand abhängig ;-)

cumulonimbus8 · 1. April 2021

Wäre um so lögischer (was ich las empfahl quasi vw als das Beste). aber - das wäre einfach schenll zu fragen - auf welche Grenzen reagieren nun wieder die Prozente..?
CN8

netzgestaltung · 1. April 2021

prozente richten sich nach der größe des umliegenden elements, das die leinwand darstellt. dh dieses soll auf die ganze breite(automatisch bei blockelementen) und höhe gehen, dann sollte es klappen.

in einem frame kann man eine height-chain bauen, die die höhe nach innen weiterleitet, wenn das vertikale zentrieren nicht funktioniert. dazu müssen aber alle elemente unterwegs bekannt sein.

Ergänzung (1. April 2021)

ich hab das hier mal mit deinen Frames nachgestellt: http://netzgestaltung.at/framestest/ wenn es bei dir nicht geht hast du noch andere einflüsse, die jetzt noch unbekannt sind.

cumulonimbus8 · 1. April 2021

Dein Beispiel sollte in vollem Umfang mein Hobby-Projekt anno Toibak anbbilden.

Ich frage mich - wenn ich denn jetzt Zeit hätte - was für Elemente ich da (Chain) ineinanderschachteln kann ohne meinen Plan den grünen Beispiel-Hintergund als ganze Fläche mit einem Gradienten zu füllen. Was immer ich also im Frame einsetze - es muss für meine Idee ›Nichts‹ mit etwas Freifliegendem mitten in der Mitte sein; wobei ich vllt. im Freifliegenden eine Kette anknüpfen könnte. Bilder als Freifleigendes haben den Vorzug 2 Dimensionen fix zu haben, das hat auch nicht Alles und Jedes.

Sodele, Cheffe will was nach dem Mittagmahl
CN8

netzgestaltung · 1. April 2021

also diese chain sollte hier nicht nötig sein, weil du eh sehr wenig elemente hast und weil der body im frame die 100vh schön interpretiert (FF, andere Browser jetzt mal nicht getestet) daher sollte nichts weiter nötig sein.

ich hab das hier jetzt mal mit einem Pattern von https://projects.verou.me/css3patterns/#rainbow-bokeh versehen.

cumulonimbus8 · 1. April 2021

Dass ich keine Chain brauche ist bei dem simplen Ding schon klar

Aber die Idee ist gut und es schadet nicht hier auch drüber nachgedacht zu haben.
Ich habe nur noch nicht probiert inweiweit sich das erste und weitere Glieder ans Zentrieren halten.
CN8

HTML (CSS) Bild horizontal und vertikal auf Bildschirm/Window zentrieren

Fleet Admiral

Commander

Fleet Admiral

Lieutenant

Commander

Fleet Admiral

Anhänge

Captain

Commander

Fleet Admiral

Captain

Captain

Fleet Admiral

Captain

Fleet Admiral

Captain

Fleet Admiral

Captain

Fleet Admiral

Captain

Fleet Admiral

Ähnliche Themen