img - anzeige mit max-height ? - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > img - anzeige mit max-height ?

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > img - anzeige mit max-height ?

Pages: [1]

geschrieben von bananaboy am 01.05.2010 - 20:41

moin ...

ich möchte thumbnails als vorschaubilder anzeigen lassen ...
da sich das ganze in tabellen abspielt sollen diese natürlich nicht explodieren

ich habe auf dem webspace horizontale sowie auch vertikale bilder und lasse die bilder welche ich hochlade
auf maximale seitenlänge der längsten länge auf 200px skalieren ...
so passen sie super ins layout der webseite .

wenn aber ein vertikales thumbnail angezeigt wird , welches ja jetzt die höhe von 200px hat sprengt es die tabelle .

ich hatte versucht mit style="max-height:132px" diese thumbs in der höhe zu reduzieren ...
das klappt aber leider so nicht mit dem internet explorer ...
der firefox , opera und safari haben damit kein problem .

gibt es eine möglichkeit für alle browser die höhe zu limitieren ... auch für den IE ?

hier mal ein beispiel wie ich das anzeigen lassen möchte .

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12:

<div align="center">
	<table border="1" cellspacing="0" style="border-collapse: collapse" height="200" width="244" bordercolor="#555555">
  <tr>
    <td height="170">
	<p align="center">{if image_file}<a href="{url}"><img src="{image_file}" border="1" style="max-height:132px"></a>{endif image_file}</td>
    </tr>
    <tr>
      <td align="center" height="30" >
	<a href="{url}" class="maincat">{name}</a>&nbsp;({num_images}) 
      {if is_new}<sup class="new">{lang_new}</sup>{endif is_new}
    </tr>
  </table></div>

danke

gruss
"bananaboy"

geschrieben von bananaboy am 01.05.2010 - 21:30

moin ...

habe jetzt einiges ausprobiert und habe nun auch erfolgreich auf dem IE anwenden können ...

falls es jemanden interessiert ...

ich habe einen style hinzugefügt .

das ganze sieht jetzt so aus .

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19:

<style>
.img {
  max-height: 132px;
  height: expression(this.height > 132 ? "132px" : true);
}
</style>

<div align="center">
	<table border="1" cellspacing="0" style="border-collapse: collapse" height="200" width="244" bordercolor="#555555">
  <tr>
    <td height="170">
	<p align="center">{if image_file}<a href="{url}"><img class="img" src="{image_file}" border="1"></a>{endif image_file}</td>
    </tr>
    <tr>
      <td align="center" height="30" >
	<a href="{url}" class="maincat">{name}</a>&nbsp;({num_images}) 
      {if is_new}<sup class="new">{lang_new}</sup>{endif is_new}
    </tr>
  </table></div>

das funktioniert mit den browsern firefox , opera, safari und IE 6-7-8

andere habe ich nicht zur verfügung .

gruss
"bananaboy"

geschrieben von Danny am 02.05.2010 - 00:18

Andere Idee wie ich es in vielen Fällen mache wäre das Bild beim ersten Aufruf mittels PHP und GD im richtigen Seitenverhältnis auf die gewünschte Größe skalieren und als Thumbnail als neue Datei speichern. Im nächsten Aufruf wird dann sofern es existiert und das richtige Bild darstellt das Thumbnail genommen.

Ok ist natürlich keine HTML/CSS Lösung aber Vorteil ist neben besserer Qualität (das Herunterrechnen der Bilder im Browser sieht m.E. teilweise schrecklich aus) die nun kleinere Dateigröße. Bei height / max-height wird ja trotzdem das große Bild geladen.

Gruß Danny

geschrieben von Gast am 02.05.2010 - 00:39

moin ...

jo .. danke

das kann ich natürlich auch machen ...
möglichkeit besteht zuhause am rechner oder webseitig über \'nen skript ..

ich dachte nur weil es weniger arbeit ist wenn es so skaliert angezeigt werden könnte .

ich nutze das bilder-skript 4images ....
dort ist schon einiges möglich ohne das skript auf links zu drehen ...

nur habe ich noch keinen vollen erfolg mit dem skalieren ...

was ich da oben probiert habe funktioniert zwar in einer datei namens category_bit.html
diese ist zum anzeigen des inhalts der kategorien ...
aber nicht in der thumbnail_bit.html ...
hier werden die thumbnails mit {thumbnail} aufgerufen ....
nur nicht via <img src=\" sondern alleinstehend .

stelle ich hier das {thumbnail} in <img class=\"img\" src=\"{thumbnail}\" border=\"1\">
dann wird das thumbnail nicht skaliert und es wird zusätzlich noch ein platzhalter für ein bild angezeigt plus \" border=\"1\">

ich habe kein plan wie ich das ändern kann ohne manuell zu skalieren .

jemand \'ne idee ?
vielleicht kennt sich ja jemand sogar mit 4images aus ...

danke

gruss
\"bananaboy\"

geschrieben von bananaboy am 02.05.2010 - 00:40

moin ...

jo .. danke

das kann ich natürlich auch machen ...
möglichkeit besteht zuhause am rechner oder webseitig über 'nen skript ..

ich dachte nur weil es weniger arbeit ist wenn es so skaliert angezeigt werden könnte .

ich nutze das bilder-skript 4images ....
dort ist schon einiges möglich ohne das skript auf links zu drehen ...

nur habe ich noch keinen vollen erfolg mit dem skalieren ...

was ich da oben probiert habe funktioniert zwar in einer datei namens category_bit.html
diese ist zum anzeigen des inhalts der kategorien ...
aber nicht in der thumbnail_bit.html ...
hier werden die thumbnails mit {thumbnail} aufgerufen ....
nur nicht via <img src=" sondern alleinstehend .

stelle ich hier das {thumbnail} in <img class="img" src="{thumbnail}" border="1">
dann wird das thumbnail nicht skaliert und es wird zusätzlich noch ein platzhalter für ein bild angezeigt plus " border="1">

ich habe kein plan wie ich das ändern kann ohne manuell zu skalieren .

jemand 'ne idee ?
vielleicht kennt sich ja jemand sogar mit 4images aus ...

danke

gruss
"bananaboy"

geschrieben von bananaboy am 02.05.2010 - 02:31

moin ...

ok ... habe alles hinbekommen ...

das "übel" war die functions.php ....
dort war das zeug definiert .

habe den style in den globalen "seiten-style" (css) verschoben und in der funktions.php die anzeige angepasst .

gruss
"bananaboy"