Bild an Browser anpassen

[Thomasio]

Das Thema gehört wahrscheinlich entweder in JavaScript, oder CSS, aber nachdem ich davon keine Ahnung habe packe ich es mal hier rein.

Ich habe eine simple HTML Seite, die Bilder und Text anzeigt, etwa so:

<p>
Irgendwas an Text<br><br>
<img src="Bild1.jpg"><br><br>
Neuer Text<br><br>
<img src="Bild2.jpg">
</p>

usw.

Die Bilder sind alle verschieden gross, manche so gross, dass sie bei kleiner Auflösung noch nicht mal dann ins Fenster passen, wenn das Fenster den ganzen Bildschirm füllt, andere Bilder sind wieder so klein, dass ich selbst bei kleinem Fenster 2 nebeneinander machen könnte.

Was ich jetzt gerne machen würde ist, alle Bilder die zu breit sind fürs Fenster automatisch auf Fensterbreite schrumpfen und dabei das Seitenverhältnis beibehalten.
Bilder die kleiner sind als das Fenster sollen aber nicht geändert werden, also feste width="x" geht nicht.
Optimal wäre eine Art automatische Grössenanpassung, wenn der User das Fenster grösser oder kleiner macht.

Ich habe im Web ein paar Sachen dazu gefunden, aber da geht es immer entweder um ein einzelnes Bild oder alle Bilder einer Seite auf einmal, ich brauche das aber für mehrere Bilder pro Seite und jedes Bild separat.

Kann mir jemand "für Doofe" erklären, ob und wie das am einfachsten zu machen ist, oder mir einen link geben, wo es eine Anleitung dazu gibt?

 

[Maik]

Hi,

mit einer relativen Breite reagieren die Grafikelemente auf die Skalierung des Browserfensters, und übergroße Elemente werden auf die Breite des Viewports angepaßt. Die Bildproportionen bleiben hierbei erhalten.

<p>
Irgendwas an Text<br><br>
<img src="Bild1.jpg" width="100%"><br><br>
Neuer Text<br><br>
<img src="Bild2.jpg" width="100%">
</p>

Um eine Fallunterscheidung zwischen einzelnen Grafikelementen vornehmen zu können, bietet sich hier die CSS-Klasse an:

<p>
Irgendwas an Text<br><br>
<img src="Bild1.jpg" class="width"><br><br>
Neuer Text<br><br>
<img src="Bild2.jpg"><br><br>
noch mehr Text<br><br>
<img src="Bild3.jpg" class="width">
</p>

img.width { width:100%; }

mfg Maik

 

[Thomasio]

Entweder verstehe ich das falsch, oder es funktioniert nicht wie es soll.
Egal ob ich mache

<img src="Bild1.jpg" width="100%">

oder

img.width { width:100%; }

<img src="Bild1.jpg" class="width">

in beiden Fällen habe ich immer ALLE Bilder einer Seite 100% der Seite breit, auch
Bilder die im Original viel kleiner sind.

Ich brauche eine Begrenzung, im Stil von, wenn das Fenster breiter ist als das Bild, dann nicht skalieren sondern Originalgrösse anzeigen und das für jedes Bild einzeln.
Ich fürchte das wird zum Problem, solange ich width nur in % der Fensterbreite angeben kann, während ich weder die absolute Grösse des Bildes noch die absolute Grösse des Fensters kenne.

 

[Maik]

Entweder verstehe ich das falsch, oder es funktioniert nicht wie es soll.
Egal ob ich mache

<img src="Bild1.jpg" width="100%">

oder

img.width { width:100%; }

<img src="Bild1.jpg" class="width">

in beiden Fällen habe ich immer ALLE Bilder einer Seite 100% der Seite breit, auch
Bilder die im Original viel kleiner sind.

Dann hast du diese Formatierung auf alle Bilder im Dokument angewendet - von nichts kommt nichts

In diesem Beispiel von eben besitzen lediglich das erste und dritte Grafikelement die relative Breite, das Zweite liegt im Originalformat vor:

<p>
Irgendwas an Text<br><br>
<img src="Bild1.jpg" class="width"><br><br>
Neuer Text<br><br>
<img src="Bild2.jpg"><br><br>
noch mehr Text<br><br>
<img src="Bild3.jpg" class="width">
</p>

mfg Maik

 

[Thomasio]

Soweit logisch, aber das hilft mir nicht, weil ich immer noch nicht weiss, wie gross das Browser Fenster ist.

Nehmen wir als Beispiel 3 Bilder in Breite 100px, 500px, 1000px.

Jetzt kommt der erste User und hat sein Fenster 200px breit, logisch, Bild1 bleibt unverändert, nur Bild2 und 3 müssen kleiner werden.

Mache ich aber width="100%" in Bild2 und Bild3 und der nächste User kommt mit einer Auflösung von 1600x1200 und Browser als Vollbild, dann sieht der Bild2 in 3fache Originalgrösse und selbst Bild3 erscheint für ihn immer noch verzerrt.

 

[Maik]

Dann darfst du die Grafikelemente nicht an die Fenstergröße anpassen lassen.

mfg Maik

 

[Thomasio]

Ich habe anderswo ein Stückchen JavaScript gefunden, was das Problem scheinbar löst, aber, mal abgesehen davon, dass es nicht in dieses Forum gehört, ich habe keinen Dunst was das soll, oder wie ich dies für meine Zwecke nutzbar machen könnte

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Vielleicht kannst du mir sagen, ob ich dies für meinen Zweck nutzen kann?

 

[Maik]

Das Script ermittelt lediglich die Größe des Anzeigefensters im Browser und gibt die Werte in zwei Alerts aus.

mfg Maik

 

[Thomasio]

So weit hatte ich das begriffen.
Wenn meine Logik mich nicht ganz verlassen hat, müsste man jetzt "nur" noch das Selbe mit den Bildern machen, und dann die Breite von jedem Bild einzeln mit der Breite vom Fenster abgleichen, mit einer Funktion

OnDocumentResize="..." (keine Ahnung ob es eine solche Funktion überhaupt gibt)

aber dazu reicht mein Wissen einfach nicht aus.
Ich kapiere gerade mal so viel, dass es theoretisch gehen müsste, WIE es gehen würde, da muss ich passen, sprich das würde ich gerne lernen.