In der Hypertext Markup Language (HTML) wird ein spezieller Befehl „tag“verwendet, um ein Bild auf einer Seite anzuzeigen. Dieses Tag wird als img bezeichnet und enthält eine Reihe von Variablen - "Attribute". Mit Hilfe von Attributen können Sie alle Aspekte der Darstellung eines Bildes in einer Hypertextseite einschließlich seiner Abmessungen bestimmen. Dies ist jedoch nicht die einzige Möglichkeit, das Problem zu lösen – Sie können das Bild auch mit Cascading Style Sheets (CSS) verkleinern.
Anleitung
Schritt 1
Platzieren Sie die Höhen- und Breitenattribute in dem Tag, das für die Anzeige des gewünschten Bildes verantwortlich ist. Stellen Sie den ersten auf die vertikale Größe des Bildes und den zweiten horizontal ein. Stellen Sie beide Zahlen in Pixel ein, aber die Einheiten - px - müssen hier nicht angegeben werden. Achten Sie bei der Berechnung der erforderlichen Werte für diese Attribute auf die Einhaltung der Verkleinerungsverhältnisse des Bildes, da es sonst verzerrt angezeigt wird. Um beispielsweise ein halbiertes Bild aus einer Datei namens SomePic.
Schritt 2
Sie können die proportionale Verkleinerung der Originalbildabmessungen in Prozent einstellen. Verwenden Sie dazu nur das Höhenattribut ohne Angabe der Breite und fügen Sie nach Angabe der größenbestimmenden Zahl ein Prozentzeichen hinzu. Mit einem Tag, der in dieser Form geschrieben ist, können Sie beispielsweise den gleichen Effekt wie im Beispiel aus dem vorherigen Schritt erzielen:
Schritt 3
Wenn Sie die Größe des Bildes anhand der Beschreibung der Stile angeben möchten, verwenden Sie denselben Tag-Namen - img - und die Attribute - width und height. In diesem Fall müssen immer die Maßeinheiten - px, pt oder% - angegeben werden. Um die Halbierung der Größe absolut aller Bilder auf der Seite festzulegen, fügen Sie den folgenden Eintrag in den Stilbeschreibungsblock ein: img {height: 50%;} Wenn Sie die Größe nur eines Bildes reduzieren möchten, fügen Sie ein zusätzliches id-Attribut hinzu zu seinem Tag und weisen Sie ihm einen für die Bilder dieser Seite eindeutigen Wert zu - zum Beispiel PicOne: Fügen Sie denselben Wert zum Style-Datensatz hinzu und trennen Sie ihn mit einem "Hash" # vom Tag-Namen. Die vollständige Stilbeschreibung kann in diesem Fall so aussehen: img # OnePic {height: 50%;}
