Bild automatisch skalieren

[Chris]

Hallo, bin derzeit dabei meine erste Website für ein Schulprojekt zu erstellen und will diese weitesgehen (was man als Anfänger halt so anstellen kann^^) bzw. komplett über CSS gestallten. Hab nun aber schon ein Problem. Habe zwei div Container erstellt und diese nebeneinander gesetzt (Links Inhalt, rechts das Bild).

Wenn ich aber nun ein Bild einfüge ist dieses viel zu groß (man sieht nur einen kleinen Ausschnitt des Bildes). Nun möchte ich das, wenn das möglich ist, sich das Bild automatisch der Fläche anpasst. Das wär auch daher praktisch da ich die Seite so gestallte das sie sich der jeweiligen Bildschirmgröße anpasst und damit die Fläche (sprich das Bild) automatisch mitwachsen/schrumpfen würde.

Eine weitere Frage wäre folgende: Öffnet man die Website mit ein ziemlich großen Monitor, würde das Bild verpixeln. Deshalb möche ich da eine Grenze einbauen, sprich das Bild passt sich dem Bildschirm bis zu einer Größe von z.b. 1024x768px an.

Und noch eine. Ist es überhaupt sinnvoll eine Website so zu gestallten das sie über die volle Breite des Bildschirms geht, oder sollte sie lieber eine vorgegebene Breite haben, die Website zentrieren werden und man nach Bedarf ein Hintergrundbild einsetzen was den Rest der Seite füllt wenn der Bildschirm größer ist als die Breite der Website?


Fragen über Fragen, hoffe ich finde hier gute Hilfe

Grüße,

Chris

[sejuma]

Mit CSS kannst du keine Bilder skalieren. Evtl. geht das mit Javascript, kenn ich mich aber nicht mit aus.
Ein Nachteil der Skalierung ist ja, dass damit die Bildqualität leidet.

Zu deiner weiteren Frage:
Ich hatte anfangs auch flexible Layouts verwendet, bis ich mir die Seite dann mal in verschiedenen Monitoren bzw. Fenstergrößen angesehen hatte. Da stimmen dann irgendwann die Proportionen Garfiken zu Text nicht mehr.
Ein weiterer Nachteil bei breiten Viewports ist der, dass die Textzeilen sehr lang werden und man sich beim Lesen sehr konzentrieren muss. Es tritt dann der "Tennis-Zuschauer-Effekt" ein, d.h. der Kopf wandert beim Lesen langer Textzeilen hin und her und das vermindert die Attraktivität der Seite.

Aus diesen Gründen verwende ich nunmehr fixe Layouts mit einer Gesamtbreite von so ca. 900-1000px und zentriere die Seite horizontal. Die verwendeten Grafiken werden in der Größe abgespeichert und eingebunden wie sie benötigt werden.
Damit sieht die Seite auch bei verschieden großen Viewports gleich aus; ggf. muss man lediglich scrollen. Das ist also kalkulierbar im Gegensatz zu flexiblen Layouts.