Bilder mit IMG anzeigen

html.de-Forum HTML, XHTML & CSS
1

Hallo

Ich habe ein kleines Problem beim anzeigen von Bildern über das IMG Tag:
Die Bilder sind unterschiedlich gross, diese können sowohl 120x700 sein, 650x230, wie auch 500x500. Fast alle Breiten und Höhen sind möglich. Der Platz in der Webseite ist aber immer max 320 Breite und gleiche Höhe. Wenn ich nun im IMG width=„320“ mache, so sind die Bilder zwar immer korrekt breit, allerdings kann es dann sein, dass sie zu hoch werden. Wenn ich umgekehrt height=„320“ definiere, werden sie uU. zu breit. Und wenn ich beide angebe, so passt es gar nicht, denn sie werden dann „verzogen“.
Gibt es dafür eine Lösung? So dass die Bilder immer entweder die max Breite ODER die max Höhe vewenden, OHNE dass sie breiter/höher als der verfügbare Platz werden. Das img Tag platziere ich in einer Tabelle im .

Danke und Grüsse
Rolf

2

Die CSS-Anweisung „background-size: cover;“ könnte eine Möglichkeit sein, um dein Problem ohne Javascript zu lösen:
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size
Edit: Hab’s mal ausprobiert und es scheint doch nicht das zu leisten, was Du brauchst: Im FF wirkt es nur auf die Breite ein; bei „cover“ wird die Breite nur vergrößert und bei „contain“ nur verkleinert.
Dann bleibt wohl doch nur, mit Javascript die Abmessungen zu berechnen und einzustellen.

3 
.myImg{
  width: 100%;
  height:100%;
  max-width: 320px;
  max-height: 320px;
}

sollte tun was du möchtest.

4

Dabei kann aber das Seitenverhältnis verzerrt werden und das will der TO nicht.

5

img { max-width:320px; max-height:320px; }

sollte reichen…

6

Was pax geschrieben hat, war schon nicht falsch. Allerdings würde ich heighr auf auto setzen und max-height löschen.

7

Dann hast du aber das Problem dass hochformatige Bilder zu hoch weden.

8

Ihr habt natürlich Recht. Ich sollte keine Beiträge „im Vorübergehen“ verfassen. Verzeihung bitte.
So funktioniert es wie der TS es wünscht:

css:

  img#myImage{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  div#myImageWrapper {
    height: 100%;
    width: 100%;
    max-height: 320px;
    max-width: 320px;
  }

  body, html  {
    height: 100%;
  }

html:

<div id="myImageWrapper">
    <img id="myImage" src="pfadZumBild.extension" alt="" />
</div>
9

hallo ich habe mal ein großen Problem ich habe einen hompage und habe über 6000 bilder ich möchte die bilder alle in meinen hompage einstellen gibt es da ein sehr schnellen weg die bilder sind alle schon im meine Webseite hochgeladen bei filezilla würd mich sher freuen wenn mir jemand weiter helfen kann .