Forum
Tipps
News
Menu-Icon

Bild an Seitenhöhe anpassen

Hallo.
Ich würde gerne ein Bild so skalieren dass die Höhe 100% der Höhe des Browserfenster ausmacht. Die Weite passt sich dann ja eh an.

Ich hab es schon mit div, einer Tabelle und JS probiert. JS klappt eigentlich, nur kenn ich mich nicht gut genug damit aus und ich kann die ermittelte höhe nicht im img-tag definieren.

Außerdem hoffe ich auf eine elegantere Lösung, JS gefällt mir hier nicht so gut. Am besten wäre es mit div, dass kann man ja sogar mit height anpassen, nur lässt sich das bild nicht darin "einsperren".

Ich hoffe das war nicht zu verwirrend. Falls sich jemand nach dem Anwendungszweck fragt, eig. bastle ich damit nur ein bisschen rum, html und css kann ich, wir machen das auch u. a. in der Schule.

naja, vielen dank im vorraus


Antworten zu Bild an Seitenhöhe anpassen:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
1 Leser hat sich bedankt

Hallo Fair,

vieleicht i.e. so http://www.dessau-rosslauer.de/hintergrund/

Gruß, der Rosslauer

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

so mein ich das leider nicht.
So soll das am Ende aussehen (hab ich mit paint erstellt):



Wenn man davon ausgeht, dass dieses komische Wappen eine sehr lange , große grafik ist. Ich möchte dass die Bildhöhe sich anpasst und das Bild quasi randlos dargestellt wird (bis auf links und rechts) und man nicht scrollen muss

(Das Bild ist nur ein Beispielbild welches ich nicht verwende, und es könnte genauso gut jedes beliebige sein.)  

« Letzte Änderung: 15.06.10, 17:49:59 von Fair »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Das Zauberwort lautet embed

<embed src="dasbild.png" width="128px" height="100%">

(als Beispiel für ein 128 pixel breites Bild namens dasbild.png)

Nachtrag:
Frag mich aber nicht ob das für irgendeinen Standard valide ist. Ich habs nur eben im Firefox getestet. Da wird es so ausgeführt wie von Dir gewünscht.
 

So und nu änder ich mein Posting noch mal...
Es gibt scheinbar eine HTML4.0 valide Vairante von embed. Sie nennt sich object.

<object data="dasbild.png" type="image/png" width="128px" height="100%">
</object>

So und nu editier ich nicht mehr. Soll mich wer anderes korrigieren, wenn immernoch was falsch ist. :)

« Letzte Änderung: 15.06.10, 21:06:15 von MBGucky »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi MBGucky,

es verstösst, meines wissens, gegen keine mir bekannte Regel  ;D

Gruß, der Rosslauer  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi,

ich habs eben mal durch den Validator geschickt. Laut diesem hat embed weder in HTML4.01 noch in XHTML1.0 was zu suchen. Ist wohl eher ne alte Netscape Krücke, so wie ich das sehe. Man sollte also tatsächlich object verwenden.
 

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
1 Leser hat sich bedankt

Bringt leider beides nicht viel.

embed zeigt in jedem Browser irgendeinen Blöd.sinn an.

object hört sich gut an, im IE erscheint aber kein Bild (wtf??), und firefox zeigt das Bild ganz normal an.

ABER: Chrome macht das was ich will (bei embed UND object), außer dass man scrollen kann weil unten ein kleiner Abstand ist, vll. kann man da was mit margin machen. Aber eig. möchte ich dass es auf allen Browsern funktioniert (oder wenigstens auf den gängigsten) 

« Letzte Änderung: 16.06.10, 22:31:25 von Fair »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Ich poste mal hier den Code, so wird es unter Chrome ganz genau so angezeigt (echt perfekt ;D), wie ich es will:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">

body { margin:0px; }
p { margin:0px; }

</style>
</head>
<body>

<p align="center">
<object data="einbild.jpg" type="image/jpg" height="100%">
</object>
</p>

</body>
</html>

Der w3c-Validator zeigt auch keine Fehler an. Somit hab ich jetzt eig. was ich wollte, nur das es weder mit Firefox noch mit IE funktioniert. Dabei würde es sogar als strict-variante validieren, da ein object (laut selfhtml, nur bei strict der Fall) in ein Block-Element gebunden werden muss (in diesem fall der <p>-tag).

Schonmal vielen Dank für die bisherige Hilfe :D
« Letzte Änderung: 17.06.10, 00:20:49 von Fair »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Prozentangaben waren schon immer tricky (deshalb nutz ich die nie :D)

probieres mal mit dem Hinweis hier:
http://carsten-protsch.de/zwischennetz/doctype/prozent.html

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
1 Leser hat sich bedankt

Danke, das war der entscheidende Hinweis. Validiert korrekt und funktioniert mit jedem Browser.
Ich poste hier noch das Ergebnis (vll. braucht es mal irgendwer):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">

html { height:100%; }
body { height:100%; margin:0px; }
p { height:100%; margin:0px; text-align:center; }

</style>
</head>
<body>

<p>
<img src="einbild.jpg" height="100%" alt="einbild">
</p>

</body>
</html>

Man musste übrigens zwindend bei jedem Element die Höhe angeben, sonst nutzt das Ganze nichts.

Danke nochmal @strough

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Danke nochmal @strough
:) danke fürs danke :)
aber so dinger hasse ich auch, meistens sinds so abartig kleine kleinigkeiten dass man da gar nich drauf kommt.

diefrustrierten  stunden an denen ich rat-/hilflos aufn monitor gestarrt und mri einen koffeinschock eingehandelt habe, kann ich gar nicht mehr zählen :D

« Ts3 Server auf der HP anzeigen mit TSviewerEpson 740 »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Bildpunkte
Bilder, die von einem Monitor wiedergegeben werden, bestehen aus einzelnen Bildpunkten (Pixeln). Je höher die Pixelanzahl ist, desto genauer und besser kann das Bild...

Bildschirmschoner
Der eigentliche Sinn des Bildschirmschoners ist, den Bildschirm vor dem Einbrennen des Monitorbildes zu schützen.Während das bei neueren Monitoren (außer ...

Bildwiederholfrequenz
Auf Bildschirmen erscheint ein Bild nur Bruchteile von Sekunden, weil die es erzeugenden Elektronenstrahlen oder Impulse sehr kurzzeitig wirken. Deshalb wird es mit einer...