Bildhöhe anpassen

Computer: Software & Programmierung HTML & CSS
#1

Hallo ihr Lieben,

ich habe da noch einmal ein kleines Problem und hoffe, ihr könnt mir helfen…

Ich würde gerne auf der Startseite meiner Website rotierende Bilder einsetzen. Das habe ich mit dem folgenden Code auch schon geschafft:

bilder = new Array(„01.png“, „02.png“, „03.png“); document.write("<IMG SRC=„images/startbilder/“ + bilder[Math.floor(Math.random()*3)] + „“ BORDER=0>");

Nun möchte ich aber, dass diese Bilder (alle gleich groß) von der Höhe her an die entsprechende Bildschirmauflösung des Betrachters angepasst werden. Also, wenn jemand mit Bildschirmauflösung 1024 x 768 das Bild sieht, ist es 768px hoch. Wenn jemand mit 1024 x 640 das Bild sieht, ist es 640px hoch… etc. Die Breite sollte sich entsprechend proportional anpassen (weil bei Bildschirmfüllend, das Bild ja gestreckt werden würde).

Wie kann man das denn machen? Es funktioniert leider nicht, wenn ich einfach nur height = 100% definiere… und wie muss ich die entsprechende Breite definieren…

Hat jemand eine Idee?

VIELEN LIEBEN DANK SCHON EINMAL FÜR EURE HILFE!!
Claudia

#2

Viewport
http://aktuell.de.selfhtml.org/weblog/aufloesung-vie…

… ist eines der hilfreichen Suchtstichtworts.

Gruß

Stefan

#3

Hallo,

mal eine Frage dazu:

Also, wenn jemand mit
Bildschirmauflösung 1024 x 768 das Bild sieht, ist es 768px
hoch.

Und die restlichen Elemente des Browsers? Leisten, Rahmen, Toolbars? Sollen die verschwinden?
Oder bist Du mit Scrollbalken einverstanden?

Wie kann man das denn machen? Es funktioniert leider nicht,
wenn ich einfach nur height = 100% definiere.

Das liegt dann vielleicht daran, dass das Elternelement nicht auch eine Höhe von 100% hat. Eine Höhe von 100% bedeutet nämlich „so groß wie das Elternelement“. Allerdings beziehen sich die prozentualen Größenangaben auch nicht auf die Auflösung, weil CSS die ohnehin nicht kennt.

Letztlich hapert es bei Dir an einer Verständnisfrage, was die Auflösung und was der Viewport ist, siehe dazu die andere Antwort auf Deine Frage.

Liebe Grüße,
-Efchen

#4

Hallo Efchen,

vielen dank für deine Antwort. Ich bin noch blutiger Laie, daher vielen Dank, dass du Rückfragen stellst. :smile:

Und die restlichen Elemente des Browsers? Leisten, Rahmen,
Toolbars? Sollen die verschwinden?
Oder bist Du mit Scrollbalken einverstanden?

Die restlichen Elemente des Browsers sollen bleiben. ich möchte nur im viewport die 100%ige Höhe haben. Einen Scrollbalken für das Bild möchte ich genau vermeiden… :smile:

Das liegt dann vielleicht daran, dass das Elternelement nicht
auch eine Höhe von 100% hat. Eine Höhe von 100% bedeutet
nämlich „so groß wie das Elternelement“. Allerdings beziehen
sich die prozentualen Größenangaben auch nicht auf die
Auflösung, weil CSS die ohnehin nicht kennt.

blöde frage, aber was ist denn in meinem Fall das Elternelement? Der Body ist auch Height 100% definiert…

Und kannst du mir sagen, wie ich mein Bild dann dazu bringe, sich an 100% Höhe des Viewports auszurichten? Oder geht das gar nicht? Ich bin verzweifelt.

Danke und Gruß,
Claudia

#5

Hallo,

vielen dank für deine Antwort. Ich bin noch blutiger Laie,
daher vielen Dank, dass du Rückfragen stellst. :smile:

Genaugenommen sollten die Rückfragen Dich darauf bringen, dass Deine Frage nichts mit der Bildschirmauflösung zu tun hat - wie eigentlich gar nichts beim Erstellen von Websites. :smile:

Das liegt dann vielleicht daran, dass das Elternelement nicht
auch eine Höhe von 100% hat.

blöde frage, aber was ist denn in meinem Fall das
Elternelement? Der Body ist auch Height 100% definiert…

Was das in Deinem Fall ist, weiß ich nicht, ich kenne Deine Seite ja nicht. Aber das Elternelement ist immer das Element, in dem das aktuelle Tag steht, das geht bis hoch zum body und in einigen Browsern muss auch noch das Elternelement vom body, nämlich die Höhe 100% bekommen.

Und kannst du mir sagen, wie ich mein Bild dann dazu bringe,
sich an 100% Höhe des Viewports auszurichten?

Damit würdest Du aber nicht automatisch Scrollbalken vermeiden. Wenn durch die Vergrößerung die Breite so groß wird, dass das Bild breiter als der Viewport ist, muss man wieder scrollen. Wenn Du height und width mit 100% angibst, wird das Bild evtl. gestaucht.

Oder geht das
gar nicht? Ich bin verzweifelt.

Das einzige, was geht, ist das Bild unter Zuhilfenahme einer Programmiersprache in der Größe anzupassen, das sollte mit JavaScript gehen (klar, dass man nichts sieht, wenn kein JS aktiviert ist) oder wahrscheinlich auch mit PHP oder einer anderen serverseitigen Sprache, die Funktionen zur Bildbearbeitung haben.

Mit HTML&CSS-Mitteln alleine geht das jedenfalls nicht.

Liebe Grüße,
-Efchen

#6

Moin moin,

Und kannst du mir sagen, wie ich mein Bild dann dazu bringe,
sich an 100% Höhe des Viewports auszurichten? Oder geht das
gar nicht? Ich bin verzweifelt.

Wir sind in einem Dynamischen Bereich . Klar kannst du dem Bild sagen, sei so gross wie der body . Es wird dann auch automatisch proportional in die breite gehen. Aber wenn der Bildschirm zu hoch ist, gibt es scrollbalken unten , den die breit ergibt sich ja aus der höhe . Ausserdem schneidet es sich dann an den seiten ab .

html {height:100%}
body {height:100%}
img {height:100%}

bilder = new Array(„01.png“, „02.png“, „03.png“);
document.write("<IMG SRC=""+ bilder[Math.floor(Math.random()*3)] + „“ BORDER=0>");

#7

wow danke, das hat mir sehr geholfen. :smile:
Ich probier mal ein bisschen rum, aber ich glaube, du hast mir gerade meine Lösung geliefert!!

DANKE!!
Claudia

#8

sorry, ich hab da doch noch einmal eine Frage:
Gibt es auch noch die Möglichkeit, die rotierenden Bilder mittig auszurichten?

Mein CSS sieht so aus:

#startbild{
position: absolute;
top: 10px;
left: 10px;
height: 100%;
width: auto;
max-height: 768px;
max-width: 1024px;
}

ich habe schon versucht zu sagen: left: center etc. aber das funktioniert nicht…
hast du da auch noch eine Idee?

Lieben Gruß,
Claudia

#9

Guten Morgen,

wenn Du absolut positionierst, kannst Du natürlich nicht gleichzeitig zentrieren.

In CSS geht Zentrierung so:
Inline-Elemente werden zentriert, indem das Elternelement „text-align:center“ bekommt.
Block-Elemente werden zentriert, indem das Element selbst „margin:0 auto“ bekommt.

Grüße,
-Efchen

#10

Also ist img inline im body :smile: