automatisch generierte Bildgröße auslesen

[blumentopf]

Ist es möglich, die Höhe eines Bildes per CSS festzulegen, und dann die automatisch daraus generierte Breite auszulesen?
Der Sinn davon ist folgender, vielleicht gibt es dafür ja aber auch einen einfacheren Weg..

Ich möchte ein Bild an die Fensterhöhe anpassen, so dass es 80% des Fensters ausfüllt.
Die Breite lege ich nicht fest, damit das Seitenverhältnis erhalten bleibt.
Man könnte das natürlich auch berechnen, wenn man das Seitenverhältnis der Grafik kennt, aber das schien mir die einfachste Möglichkeit.

Nun soll unter das Bild eine Linkleiste, die genau die Breite des Bildes einnimmt.
Ich hatte gehofft, einfach mit document.getElementbyID().width diese auslesen zu können.
Wenn ich diesen Wert aber nicht eigenhändig definiert habe, scheint er nicht zur Verfügung zu stehen.
Jedenfalls gibt mir der alert immer undefined aus.

[JürgenB]

Hallo blumentopf,

Jedenfalls gibt mir der alert immer undefined aus.

ist das Bild denn schon geladen, wenn du die Breite abfragst? Ich frage die Größe von Bildern im onload-Eventhandler ab.

Gruß, Jürgen

[blumentopf]

Hallo blumentopf,

Jedenfalls gibt mir der alert immer undefined aus.

ist das Bild denn schon geladen, wenn du die Breite abfragst? Ich frage die Größe von Bildern im onload-Eventhandler ab.

Gruß, Jürgen

Ich glaube schon, dass das Bild geladen ist. Testweise verknüpfe ich hier die Abfrage mit dem Klick auf einen Link, dann sollte das ja sichergestellt sein.
Ich kann auch die Höhe abfragen, wenn ich sie vorher definiert habe. Nur bei der Breite kommt kein Wert heraus.

<IMG id="grafik" SRC = "bilder/screenshot_01.png" ALT = ""style="height:40%;">  

  
<script type="text/javascript">  
hoch = document.getElementById("grafik").style.height;  
function Hoehe(){  
alert(hoch);  
}  
  
breit = document.getElementById("grafik").style.width;  
function Breite(){  
alert(breit);  
}  
</script>  
<a href="javascript:Hoehe();">Wie hoch?</a>  
<a href="javascript:Breite();">Wie breit?</a>

[ChrisB]

Hi,

bitte zitiere sinnvoll – das, worauf du dich konkret beziehst, nicht einfach „alles“ – Danke!

Ich kann auch die Höhe abfragen, wenn ich sie vorher definiert habe. Nur bei der Breite kommt kein Wert heraus.

Das ist so, wenn du Eigenschaften über .style abfragst. (Und für die Höhe bekommst du ja vermutlich auch nur die "40%", die du gesetzt hast, und nicht den tatsächlichen Wert in Pixeln?)

Aber da dich ja die konkreten Maße interessieren, solltest du es eher mal mit offsetWidth (bzw. -Height) versuchen.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, blumentopf!

Ich kann auch die Höhe abfragen, wenn ich sie vorher definiert habe. Nur bei der Breite kommt kein Wert heraus.

Das ist korrekt, weil es keinen entsprechenden style gibt. Du musst die Breite messen, etwa mit offsetWidth.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Du musst die Breite messen

Nein.

Du kannst das ganze JavaScript entsorgen.

Qapla'

[Tabellenkalk]

Hallo,

Ich glaube schon, dass das Bild geladen ist. Testweise verknüpfe ich hier die Abfrage mit dem Klick auf einen Link, dann sollte das ja sichergestellt sein.

wenn denn die Ermittlung auch dann erst stattfände...

Gruß
Kalk

[blumentopf]

wenn denn die Ermittlung auch dann erst stattfände...

wäre dies auf diese Weise der Fall?

function Breite(){  
breit = document.getElementById("grafik").offsetwidth;  
alert(breit);

Es wird weiterhin undefined ausgegeben.

oder muss man das onload abfragen? Wie würde das genau funktionieren?
Dank und Gruß

[Jan]

Ist es möglich, die Höhe eines Bildes per CSS festzulegen, und dann die automatisch daraus generierte Breite auszulesen?
Der Sinn davon ist folgender, vielleicht gibt es dafür ja aber auch einen einfacheren Weg..

Ich möchte ein Bild an die Fensterhöhe anpassen, so dass es 80% des Fensters ausfüllt.
Die Breite lege ich nicht fest, damit das Seitenverhältnis erhalten bleibt.
Man könnte das natürlich auch berechnen, wenn man das Seitenverhältnis der Grafik kennt, aber das schien mir die einfachste Möglichkeit.

Nun soll unter das Bild eine Linkleiste, die genau die Breite des Bildes einnimmt.
Ich hatte gehofft, einfach mit document.getElementbyID().width diese auslesen zu können.
Wenn ich diesen Wert aber nicht eigenhändig definiert habe, scheint er nicht zur Verfügung zu stehen.
Jedenfalls gibt mir der alert immer undefined aus.

Wenn Du nicht auf einer Javascript-Lösung bestehst, könntest Du in Html einen "Wrapper" für das Bild erstellen, der 80% des Anzeigebereiches einnimmt. Das Bild und die Navigationsleiste erhalten jeweils 100% des zur Verfügung stehenden Raumes, d.h. 100% des Wrappers bzw. 80% des Anzeigebereiches. Die Höhe des Bildes erhält per Css den Wert "auto, sodass die Proportionen des Bildes erhalten bleiben. Das Bild wird zudem über "display:block" zu einem Blockelement umformatiert ...

[blumentopf]

Wenn Du nicht auf einer Javascript-Lösung bestehst, könntest Du in Html einen "Wrapper" für das Bild erstellen, der 80% des Anzeigebereiches einnimmt. Das Bild und die Navigationsleiste erhalten jeweils 100% des zur Verfügung stehenden Raumes, d.h. 100% des Wrappers bzw. 80% des Anzeigebereiches. Die Höhe des Bildes erhält per Css den Wert "auto, sodass die Proportionen des Bildes erhalten bleiben. Das Bild wird zudem über "display:block" zu einem Blockelement umformatiert ...

die Breite des divs würde sich dann vermutlich an dem Objekt orientieren, das am meisten Platz braucht. Also wenn das Bild groß genug ist, passt sich die Linkleiste genau ein, wenn zuwenig Platz für sie ist, ragt sie aus dem Bildrand heraus, bleibt dafür aber lesbar.
So weit richtig? Ich probier das gleich mal..
Dank und Gruß

[blumentopf]

Wenn Du nicht auf einer Javascript-Lösung bestehst, könntest Du in Html einen "Wrapper" für das Bild erstellen, der 80% des Anzeigebereiches einnimmt. Das Bild und die Navigationsleiste erhalten jeweils 100% des zur Verfügung stehenden Raumes, d.h. 100% des Wrappers bzw. 80% des Anzeigebereiches. Die Höhe des Bildes erhält per Css den Wert "auto, sodass die Proportionen des Bildes erhalten bleiben. Das Bild wird zudem über "display:block" zu einem Blockelement umformatiert ...

die Breite des divs würde sich dann vermutlich an dem Objekt orientieren, das am meisten Platz braucht. Also wenn das Bild groß genug ist, passt sich die Linkleiste genau ein, wenn zuwenig Platz für sie ist, ragt sie aus dem Bildrand heraus, bleibt dafür aber lesbar.
So weit richtig? Ich probier das gleich mal..
Dank und Gruß

Das funktioniert leider so bislang nicht. Stelle ich die Größe der Leiste (in Form einer Tabelle) auf 100%, nimmt das div 100 % der Fensterbreite ein. Stelle ich die Leistenbreite auf auto steht sie in keinem erkennbaren Zusammenhang zu irgendeinem weiteren Elemenet der Seite.
Was für einen Nutzen bringt die Blockformatierung?

[Matthias Apsel]

Om nah hoo pez nyeetz, blumentopf!

Das funktioniert leider so bislang nicht. Stelle ich die Größe der Leiste (in Form einer Tabelle) auf 100%, nimmt das div 100 % der Fensterbreite ein. Stelle ich die Leistenbreite auf auto steht sie in keinem erkennbaren Zusammenhang zu irgendeinem weiteren Elemenet der Seite.
Was für einen Nutzen bringt die Blockformatierung?

Das liegt daran, dass Jan gelesen hat, du möchtest die Breite auf 80% bringen. Dann würde das alles schön passen.

Matthias

[blumentopf]

Das liegt daran, dass Jan gelesen hat, du möchtest die Breite auf 80% bringen.

nur wo hat er das gelesen?
Bei mir

Ich möchte ein Bild an die Fensterhöhe anpassen, so dass es 80% des Fensters ausfüllt.

glaube ich jedenfalls nicht

Mit den 100% meinte soweit ich das verstehe sowohl Jan als auch ich 100% des wrappers.

[Matthias Apsel]

Om nah hoo pez nyeetz, blumentopf!

Das liegt daran, dass Jan gelesen hat, du möchtest die Breite auf 80% bringen.

nur wo hat er das gelesen?

Er hat sich eben verlesen. Jans Lösungsansatz sollte zielführend sein, wenn man die Breite als Ausgangswert nimmt. Du möchtest aber die Höhe als Ausgangswert haben.

Matthias

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Der Sinn davon ist folgender, vielleicht gibt es dafür ja aber auch einen einfacheren Weg..

So gar sicher. Wann immer du an JavaScript denkst, um irgendeine Darstellung zu erzielen, bist du auf dem falschen Weg. CSS – entdecke die Möglichkeiten!

Ich möchte ein Bild an die Fensterhöhe anpassen, so dass es 80% des Fensters ausfüllt.

Genau für 80% der Fensterhöhe gibt es eine passende Angabe: 80vh. Das verstehen alle aktuellen Browser.

Für die paar alten Browser gibst du einen geeigneten Fallback an; dann ist das Bild halt nicht 80% hoch. Die Bedienbarkeit der Seite dürfte nicht darunter leiden.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ich möchte ein Bild an die Fensterhöhe anpassen, so dass es 80% des Fensters ausfüllt.

Genau für 80% der Fensterhöhe gibt es eine passende Angabe: 80vh. Das verstehen alle aktuellen Browser.

Ja, aber:

Nun soll unter das Bild eine Linkleiste, die genau die Breite des Bildes einnimmt.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ja, aber:

Nichts aber.

Nun soll unter das Bild eine Linkleiste, die genau die Breite des Bildes einnimmt.

„Das Bild“ interpretiere ich als ein bestimmtes Bild, dessen Proportion also bekannt ist.

Nehmen wir mal an, Breite : Höhe = 3 : 2. Wenn das Bild 80vh hoch ist, wäre es also 120vh breit.

Ebendiese Breite kann man der Linkleiste zuweisen.

Sowohl Bild als auch Linkleiste sollten auch max-width: 100% verpasst bekommen.

Qapla'

[Darbo]

Hallo,

„Das Bild“ interpretiere ich als ein bestimmtes Bild, dessen Proportion also bekannt ist.
Nehmen wir mal an, Breite : Höhe = 3 : 2. Wenn das Bild 80vh hoch ist, wäre es also 120vh breit.
Ebendiese Breite kann man der Linkleiste zuweisen.

Milchmädchen! Wie weist du in CSS der Linkleiste als Breite 120% der Fensterhöhe zu?

IVI Darbo

[Matthias Apsel]

Om nah hoo pez nyeetz, Darbo!

Milchmädchen! Wie weist du in CSS der Linkleiste als Breite 120% der Fensterhöhe zu?

#linkleiste {  
  width: 120vh;  
}

Matthias

[Darbo]

Hallo,

Milchmädchen! Wie weist du in CSS der Linkleiste als Breite 120% der Fensterhöhe zu?

#linkleiste {

width: 120vh;
}

  
ah, ok, kannte ich noch nicht, hab das als Umschreibung für % (von Hundert) gelesen...  
  
IVI Darbo  

[Gunnar Bittersmann]

@@Darbo:

nuqneH

width: 120vh;

ah, ok, kannte ich noch nicht

Wer lesen kann, ist klar im Vorteil. In meinem ersten Posting hatte ich bereits auf die Spec verlinkt.

hab das als Umschreibung für % (von Hundert) gelesen...

Es ist ja auch ein Prozentwert. Nur dass sich vh auf einen anderen Grundwert bezieht als %.

Qapla'

[blumentopf]

„Das Bild“ interpretiere ich als ein bestimmtes Bild, dessen Proportion also bekannt ist.

Die Breite wollte ich auslesen, eben damit sie nicht bekannt bzw. festgelegt sein muss.

Nach einigem Probieren habe ich nun folgende js-Lösung gefunden, die genau das tut:

  
<IMG id="grafik" name="grafik" SRC="bilder/screenshot_01.png" ALT="" style="height:80%;" onload="Leistenbreite()" >  
  
  
<table id="leiste" name="leiste" cellpadding="20%" style="border-top:thick double #aaaaaa;">  
<tr>  
<td style="width:10%;border:none;"></td>  
<td>  
Link 1  
</td>  
<td>  
Link 2  
</td>  
<td>  
Link 3  
</td>  
<td>  
Link 4  
</td>  
</tr>  
</table>  
  
  
<script type="text/javascript">  
function Leistenbreite(){  
document.all.leiste.style.width = document.grafik.width;  
}  
</script>

Jetzt müsste ich noch veranlassen, dass bei einer Änderung der Fenstergröße die Funktion erneut ausgelöst wird. Das habe ich bislang noch nicht erfolgreich geschafft. Sollte aber nicht zu schwer sein, nehme ich an.
Wenn ich das gelöst habe, erfüllt dieser Weg, soweit ich es beurteilen kann, genau den intendierten Zweck.

Soweit vielen Dank für die Anregungen und Tipps!

[molily]

Hallo,

<table id="leiste" name="leiste" cellpadding="20%" style="border-top:thick double #aaaaaa;">

Ist das eine Layouttabelle? Gibt es einen Grund, warum du nicht CSS verwendest?

document.all.leiste.style.width = document.grafik.width;

Das ist Code für den Internet Explorer 4 und 5 (siehe http://de.selfhtml.org/javascript/objekte/all.htm@title=document.all). Für heutige Browser sollten besser standardisierte DOM-Methoden wie http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=document.getElementById verwendet werden.

document.getElementById('leiste').style.width = document.getElementById('grafik').width;

Geht davon aus, dass die Elemente IDs haben. Name-Attribute sind nicht mehr nötig.

Jetzt müsste ich noch veranlassen, dass bei einer Änderung der Fenstergröße die Funktion erneut ausgelöst wird.

Es gibt den Event resize bei window, der dann gefeuert wird. Dieser lässt sich mit JavaScript überwachen:

var resizeHandler = function() {…};  
window.addEventListener('resize', resizeHandler);

Mathias

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Die Breite wollte ich auslesen, eben damit sie nicht bekannt bzw. festgelegt sein muss.

Muss sie nicht. Das ist aber kein Grund, die berechnete Breite auslesen zu wollen.

Nach einigem Probieren habe ich nun folgende js-Lösung gefunden, die genau das tut:

Nochmal: Wann immer du an JavaScript denkst, um irgendeine Darstellung zu erzielen, bist du auf dem falschen Weg. CSS – entdecke die Möglichkeiten!

Jetzt müsste ich noch veranlassen, dass bei einer Änderung der Fenstergröße die Funktion erneut ausgelöst wird.

Nochmal: Du kannst das ganze JavaScript entsorgen.

Soweit vielen Dank für die Anregungen und Tipps!

Warum befolgst du sie nicht?

Qapla'

[molily]

Hallo,

Die Breite wollte ich auslesen, eben damit sie nicht bekannt bzw. festgelegt sein muss.

Muss sie nicht. Das ist aber kein Grund, die berechnete Breite auslesen zu wollen.

Ich nehme an, blumentopf meinte damit, dass die Größe des Bildes und damit auch dessen Seitenverhältnis nicht im CSS hartkodiert werden sollen. Vielleicht fällt dir noch eine CSS-Lösung für beliebige Bildgrößen ein.

Nochmal: Wann immer du an JavaScript denkst, um irgendeine Darstellung zu erzielen, bist du auf dem falschen Weg.
Nochmal: Du kannst das ganze JavaScript entsorgen.

Warum so penetrant? Deine Lösung geht von gewissen Voraussetzungen aus, die anscheinend nicht gegeben sind. Nicht mehr, nicht weniger.

Natürlich lässt sich vieles elegant mit reinem CSS lösen. Aber mangels Turing-Vollständigkeit lassen sich gewisse Logiken nicht oder nicht flexibel genug in CSS ausdrücken.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Ich nehme an, blumentopf meinte damit, dass die Größe des Bildes und damit auch dessen Seitenverhältnis nicht im CSS hartkodiert werden sollen.

Was spricht dagegen? Von „das Bild wechselt täglich/wöchentlich/monatlich und hat immer andere Proportionen“ stand nichts in der Problembeschreibung. (Macht vielleicht auch wenig Sinn, der Linkleiste immer andere Breiten zuzuweisen und darauf zu hoffen, dass deren Inhalte immer noch gut darin aussehen.)

Wenn man schlecht im Kopfrechnen ist und gerade keinen Rechner zur Hand hat (was eher nicht der Fall sein dürfte, wenn man gerade an einem solchen sitzt), kann man die Berechnung des Seitenverhältnisses auch calc() überlassen. Oder dem CSS-Präprozessor.

Warum so penetrant?

Frag ich mich auch, warum sich manche so penetrant in ihrer Sackgasse verrennen anstatt umzukehren und auf den Pfad der Tugend zu finden. ;-)

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Nehmen wir mal an, Breite : Höhe = 3 : 2. Wenn das Bild 80vh hoch ist, wäre es also 120vh breit.
Ebendiese Breite kann man der Linkleiste zuweisen.
Sowohl Bild als auch Linkleiste sollten auch max-width: 100% verpasst bekommen.

Noch robuster dürfte sein, die Breite 120vh (und max-width: 100%) dem Containerelement von Bild und Linkleiste zuzuweisen. Beide haben dann in diesem eine Breite von 100%.

Wenn das Bild durch ein anderes mit (geringfügig) anderem Seitenverhältnis ersetzt wird, hat es dann zwar nicht mehr genau 80% der Viewporthöhe, aber es ist gewährleistet, dass Bild und Linkleiste dieselbe Breite haben.

Qapla'