Adaptive Lösung für Bilder unter div

Autor：Eve Cole Aktualisierungszeit：2025-01-17 10:12:01

Wir (besonders Anfänger wie ich) stoßen oft auf ein Problem – die Bildanpassung. Dieses Problem kommt sehr häufig vor. Im Artikelbereich und in den Foren kann man sagen, dass überall dort, wo Bilder hochgeladen werden müssen, dieses Problem besteht und in den Foren immer wieder nachgefragt wird. Warum? Der Grund ist einfach: Wir können von Web-Redakteuren oder Ihren Forumsmitgliedern nicht verlangen, dass sie in der Lage sind, Bilder zuzuschneiden oder den einfachsten HTML-Code zu verstehen – obwohl dieser nicht viel technischen Inhalt hat.

Die vorherige Lösung wurde hauptsächlich mit js implementiert, aber jeder, der sie verwendet hat, weiß, dass diese Methode etwas umständlich ist. Eine andere Möglichkeit besteht darin, over-flow:hidden in einem externen Container zu definieren. Diese Methode schneidet das Bild jedoch nur aus und wird nicht automatisch angewendet.

Das Aufkommen der folgenden Methode sollte dem großartigen CSS2.0 und dem noch größeren Microsoft zu verdanken sein (ohne es gäbe es keinen Bedarf für einen so ausführlichen Code ^_^). Ich habe den Test nur auf IE6.0, FF1.5, Opera7.0 unter WinXP bestanden. Ich hoffe, dass ich mit diesem Artikel andere inspirieren kann und hoffe, dass weitere Experten Hinweise geben können. Der Schlüssel ist: max-width:780px; und die Zeile darunter.

Feste Pixelanpassung:

Codefeld ausführen

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html> charset=gb2312 /> <title>css2.0 ie</title> <style type=text/css>  </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Danke an blueidea für die Hotlink-Bilder! /> </div> </body> </html>

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Prozentuale Anpassung:

Codefeld ausführen

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html> charset=gb2312 /> <title>css2.0 dh</title> <style type=text/css>  </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Vielen Dank, blueidea, für das verlinkte Bild! /> </div> </body> </html>

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

erinnern:

1 Diese Methode ist nicht nur für img;

2 maximale Breite, maximale Höhe, minimale Breite, minimale Höhe.

Einführung in die Verwendung von Ausdrücken in CSS

Autor: dozb

Definition

IE5 und spätere Versionen unterstützen die Verwendung von Ausdruck in CSS, um CSS-Eigenschaften mit Javascript-Ausdrücken zu verknüpfen. Die CSS-Eigenschaften können hier inhärente Eigenschaften des Elements oder benutzerdefinierte Eigenschaften sein. Das heißt, auf das CSS-Attribut kann ein Javascript-Ausdruck folgen, und der Wert des CSS-Attributs entspricht dem Ergebnis der Berechnung des Javascript-Ausdrucks. Sie können im Ausdruck direkt auf die Eigenschaften und Methoden des Elements selbst verweisen oder andere Browserobjekte verwenden. Der Ausdruck ist so, als ob er innerhalb einer Mitgliedsfunktion dieses Elements wäre.

Weisen Sie den intrinsischen Attributen von Elementen Werte zu

Sie können beispielsweise ein Element basierend auf der Größe des Browsers positionieren.

#myDiv {

Position: absolut;

Breite: 100px;

Höhe: 100px;

links: expression(document.body.offsetWidth - 110 + px);

oben: expression(document.body.offsetHeight - 110 + px);

Hintergrund: rot;

}

Weisen Sie benutzerdefinierten Elementattributen Werte zu

Entfernen Sie beispielsweise gepunktete Kästchen für Links auf der Seite.

Der übliche Ansatz ist:

Auf den ersten Blick sind die Vorteile der Verwendung von Ausdruck vielleicht nicht offensichtlich, aber wenn es Dutzende oder sogar Hunderte von Links auf Ihrer Seite gibt, würden Sie dann immer noch Strg+C und Strg+V mechanisch verwenden, geschweige denn beide? Im Vergleich dazu? erzeugt mehr redundanten Code?

Der Ausdruck wird wie folgt verwendet:

a {star: expression(onfocus=this.blur)}

</style>

veranschaulichen:

Der darin enthaltene Stern ist ein von Ihnen selbst definiertes Attribut. Dann ist die in expression() enthaltene Anweisung ein JS-Skript. Vergessen Sie nicht, ein Anführungszeichen zwischen dem benutzerdefinierten Attribut und dem Ausdruck zu setzen Da es sich immer noch um CSS handelt, wird es im Style-Tag und nicht im Skript platziert. OK, es ist also einfach, den gepunkteten Link-Kästchen auf der Seite in einem Satz zu entfernen. Aber seien Sie nicht selbstgefällig, wenn der ausgelöste Spezialeffekt eine CSS-Attributänderung ist, wird das Ergebnis von Ihrer ursprünglichen Absicht abweichen. Wenn Sie beispielsweise die Farbe des Textfelds auf der Seite ändern möchten, während Sie die Maus hinein- und herausbewegen, denken Sie vielleicht natürlich, dass es so geschrieben werden sollte

/* Der Originaltext ist verstümmelt, ich habe keine Zeit, ihn zu korrigieren, sorry!*/

Das Ergebnis ist jedoch ein Skriptfehler. Der richtige Weg, ihn zu schreiben, besteht darin, die Definition des CSS-Stils in die Funktion zu schreiben, wie unten gezeigt:

Eingabe {star: expression(onmouseover=function())

{this.style.backgroundColor=#FF0000},

onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }

</style>

<Eingabetyp=Text>

Beachten:

Es ist nicht unbedingt erforderlich, Expression zu verwenden, da Expression relativ hohe Browserressourcen erfordert.