Wir wissen, dass der Effekt viel besser ist, wenn die Aufgabe, Miniaturansichten zu erstellen, einem Programm überlassen wird. Aufgrund bestimmter Faktoren, z. B. wenn der Server GD nicht unterstützt, ist es jedoch unvermeidlich, CSS damit zu beauftragen.
Um ein großes Bild auf eine bestimmte Größe zu verkleinern, verwenden Sie in modernen Browsern einfach die CSS-Eigenschaften „max-width“ und „max-height“.
Für IE 6.0 und niedriger werden die beiden oben genannten CSS-Eigenschaften ignoriert. Um solche Probleme zu lösen, haben wir früher oft auf Javascript zurückgegriffen und den Bildern dann Onload-Ereignisse hinzugefügt. Zum Beispiel:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
Dies kann das Problem sicherlich lösen, wird aber bei der Aktualisierung zukünftiger Seiten zu Problemen führen – da Browser ihre CSS-Unterstützung verbessern, werden wir früher oder später alle Onload-Ereignisse aus Bildern entfernen. Es ist die Show-Zeit von Expression. Da IE das Platzieren einiger Skripte in CSS über Expression unterstützt und dieses Skript nur für IE 6.0 und niedriger verfügbar ist, ist es perfekt, es in Expression zu schreiben.
Um schließlich ein großes Bild auf 50 x 50 Pixel zu verkleinern, können Sie auf das folgende CSS zurückgreifen:
.thumbImage{
maximale Breite: 50 Pixel;
maximale Höhe: 50 Pixel;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expression(this.height>50?50:auto);
}
