• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder mit IMG anzeigen

R

rfurrer

Neues Mitglied
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 <td>.

Danke und Grüsse
Rolf
 
Werbung:
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.
 
Zuletzt bearbeitet von einem Moderator:
Code: 
.myImg{
  width: 100%;
  height:100%;
  max-width: 320px;
  max-height: 320px;
}

sollte tun was du möchtest.
 
Werbung:
Dabei kann aber das Seitenverhältnis verzerrt werden und das will der TO nicht.
 
Was pax geschrieben hat, war schon nicht falsch. Allerdings würde ich heighr auf auto setzen und max-height löschen.
 
Werbung:
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:
Code: 
  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:

Code: 
<div id="myImageWrapper">
    <img id="myImage" src="pfadZumBild.extension" alt="" />
</div>
 
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 .
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben