✔ Background soll Propertion behalten

[SilverVegeto]

Guten Tag
hab zwar gerade gesehen das kurz vor mir schon jemand wissen wollte wie sich der Hintergrund dem DIV anpasst jedoch bräuchte ich das etwas anders.

Mein Vorhaben:
Auf der Profilseite meiner User gibt es eine DIV-Box (200px x 250px) in der vertikal und horizontal das Profilbild als Backgroundbild angezeigt wird. Das Bild darf zwar kleiner als die DIV-Box sein jedoch nie größer.
Gibt es da eine Möglichkeit das die Propertion beibehalten wird?

 

[Maik]

Hi,

Auf der Profilseite meiner User gibt es eine DIV-Box (200px x 250px) in der vertikal und horizontal das Profilbild als Backgroundbild angezeigt wird. Das Bild darf zwar kleiner als die DIV-Box sein jedoch nie größer.
Gibt es da eine Möglichkeit das die Propertion beibehalten wird?

ein Hintergrundbild (background-image) kann seine Proportionen (Verhältnis der Kantenlängen) überhaupt nicht verändern, bzw. lassen sich mit CSS nicht justieren.

Selbst wenn der User ein Bild hochlädt, dass die vorgegebene Boxendimension des DIVs überschreitet, wird die Box dadurch nicht vergrößert, falls dies deine Sorge sein sollte, da der Hintergrund / das Hintergrundbild keinen Einfluß auf die Größe des Elements hat, sondern der "Bildüberschuß" vom festgelegten Anzeigebereich des Elements abgeschnitten.

Ansonsten mußt du eben serverseitig Vorsorge treffen, dass die Bilderuploads nur bis zu einer bestimmten Größe möglich sind. Hier bei uns im Forum darf das Benutzerbild (Avatar) maximal 90*90px, und das Profilbild 800*800px betragen.

mfg Maik

 

[Maik]

Hi,

Guten Abend Leute,
soweit ich mich durchgelesen habe ist vertikales zentrieren von Inhalten mit CSS 2 ein komisches Problem das nicht immer IE kompatibel ist ^^

Deswegen möchte ich euch fragen wie es richtig ist folgendes zu lösen, so das es aber auch IE/FF kompatibel ist.

Habe eine DIV-Box (208 px x 250 px) in der das Profilbild vom User vertikal und horizontal zentriert werden soll. Das Bild soll aber bei Übertretung der DIV-Box-Größe automatisch angepasst werden, ansonsten die Originalgröße beibehalten.

http://www.pmob.co.uk/temp/vertical-align3.htm

Alles weitere habe ich schon in meiner letzten Antwort erläutert.

mfg Maik

 

[SilverVegeto]

Sorry Maik wegen dem zweiten Beitrag, hatte das irgendwie total vergessen.

Aber Danke! Für diese ausführliche Erklärung hat mir sehr geholfen!

Kann nur immer wieder sagen, dass Tutorials.de echt froh sein kann dich zu haben