So ändern Sie die Größe eines Bildes mithilfe eines HTML-Tags Die Attribute width (width) und height (height) werden bereitgestellt. Als Wert werden Pixel verwendet, und die Argumente müssen mit den physischen Abmessungen des Bildes übereinstimmen. Zum Beispiel in Abb. 10.6 zeigt ein Bild mit Abmessungen von 100 x 111 Pixel.

Zahl: 10.6. Bild in Originalgröße

Dementsprechend ist der HTML-Code zum Platzieren dieser Figur in Beispiel 10.4 dargestellt.

Beispiel 10.4. Bildmaße

Wenn die Abmessungen des Bildes explizit angegeben werden, verwendet der Browser sie, um den leeren Bereich anzuzeigen, der dem Bild beim Laden des Dokuments entspricht (Abb. 10.7). Andernfalls wartet der Browser, bis das Bild vollständig geladen ist, und ändert dann die Breite und Höhe des Bildes (Abb. 10.8). In diesem Fall kann es zu einer Neuformatierung des Textes kommen, da zunächst die Größe des Bildes nicht bekannt ist und es automatisch klein eingestellt wird.

Zahl: 10.7. Bildabmessungen sind nicht angegeben und es wurde noch nicht geladen

Zahl: 10.8. Bild geladen, Text neu formatiert

Die Breite und Höhe des Bildes kann sowohl nach oben als auch nach unten geändert werden. Dies hat jedoch keinen Einfluss auf die Ladegeschwindigkeit des Bildes, da die Dateigröße unverändert bleibt. Seien Sie daher vorsichtig, wenn Sie das Bild verkleinern, weil Dies kann bei den Lesern zu Verwirrung führen, warum das Laden einer so kleinen Zeichnung so lange dauert. Das Erhöhen der Größe führt jedoch zu dem gegenteiligen Effekt: Die Größe des Bilds ist groß, aber die Datei wird im Vergleich zum Bild derselben Größe schneller geladen.

In Abb. 10.9 zeigt das gleiche Bild wie in Abb. 10,6, aber in Breite und Höhe verdoppelt.

Zahl: 10.9. Ansicht des im Browser vergrößerten Bildes

Der Code für eine solche Figur bleibt im Wesentlichen unverändert und ist in Beispiel 10.5 dargestellt.

Beispiel 10.5. Ändern Sie die Größe eines Bildes

Eine solche Größenänderung wird als Resampling bezeichnet, und der Browser-Algorithmus ist in seinen Fähigkeiten Grafikeditoren unterlegen. Daher ist es nur in besonderen Fällen erforderlich, das Bild auf diese Weise zu vergrößern, da sich sonst die Bildqualität zu stark verschlechtert. Besser ein Grafikprogramm verwenden. Ausnahmen sind Bilder mit rechteckigen Flächen. In Abb. 10.10 zeigt eine Musterdatei mit 54 Bytes und einer Originalgröße von 8 x 8 Pixel, die auf 150 Pixel erhöht wurde.

Zahl: 10.10. Vergrößertes Bild

Browser verwenden zwei Algorithmen für das Resampling - bikubisch (ergibt glatte Kanten und einen glatten Farbtonbereich) und nächstgelegene Punkte (behält den ursprünglichen Farbsatz und die Schärfe der Kanten bei). Neuere Versionen von Browsern verwenden den bikubischen Algorithmus, während ältere Browser im Gegensatz dazu den Algorithmus für den nächstgelegenen Punkt verwenden.

Die Größe des Fotos wird basierend auf der angegebenen Größe in Zentimetern (Millimetern, Zoll) sowie unter Berücksichtigung der angegebenen Größe in DPI gemäß den Papierdruckstandards geändert. Abmessungen in cm, mm und Zoll können mit einer Genauigkeit von Tausendstel angegeben werden. Beispielsweise können Sie anstelle des 15x10-Formats 15,201x10,203 cm einstellen.

Tabelle mit Standardfotogrößen für die vertikale Position (Hochformat):

Standardpapierblattgröße a4 Größe - 21 x 29,7 cm oder 2480 x 3508 Pixel bei 300 dpi. Größen anderer Blattformate können auf der Wikipedia-Seite angezeigt werden. Vergessen Sie jedoch nicht, dass die Abmessungen dort in Millimetern und Zoll aufgeführt sind, d. H. In den Einstellungen auf dieser Seite müssen Sie den entsprechenden Wert auswählen.

Wenn Sie die Größe eines Fotos ändern müssen, ohne die DPI (Punkte pro Zoll) zu berücksichtigen, dh nur die Proportionen des angegebenen Formats zu berücksichtigen, müssen Sie dafür den Parameter "Größe in DPI" in den Einstellungen auf "0" setzen.

Das Originalbild ändert sich in keiner Weise. Sie erhalten ein weiteres bearbeitetes Bild.

Anleitung

Versuchen Sie zunächst, das Bild mithilfe von Suchmaschinen zu finden. Geben Sie Ihre Abfrage ein und wählen Sie die Registerkarte Sucheinstellungen. Google verfügt beispielsweise über die Schaltfläche "Suchwerkzeuge", während Yandex über ein Symbol mit Schiebereglern verfügt. Dann müssen Sie den Punkt "Größe" auswählen und die genauen Werte angeben. Wenn Sie beispielsweise ein Foto mit einer guten Auflösung benötigen, wählen Sie Groß.

Wenn kein Bild mit der erforderlichen Größe vorhanden ist, können Sie es selbst an die Rahmen anpassen. Es gibt Wege. Das erste ist, dass Sie zuerst ein Dokument mit der gewünschten Größe erstellen und dann das Bild ändern. Das zweite ist das Gegenteil - Sie öffnen das Bild und ändern die Größe. Es gibt im Wesentlichen keinen Unterschied: Alles hängt von Ihren Vorlieben und Zielen ab. Beispiele werden in Adobe Photoshop berücksichtigt, Sie können jedoch auch andere Grafikeditoren verwenden.

Erster Weg. Klicken Sie auf "Datei" - "Neu ..." oder die Tastenkombination Strg + N. Vor Ihnen wird ein Fenster mit Einstellungen angezeigt. Geben Sie dort die Parameter für die Breite, Höhe und die erforderliche Farbauflösung an. Öffnen Sie dann das gewünschte Bild im Browser, klicken Sie mit der rechten Maustaste und wählen Sie "Bild kopieren". Kehren Sie dann zum Programm zurück und drücken Sie die Kombination Strg + V.

Das Bild wird im Grafikeditorfenster angezeigt. Klicken Sie dann auf "Bearbeiten" - "Freie Transformation" oder die Kombination von Strg + T. Es werden wichtige Punkte angezeigt, mit deren Hilfe Sie das Bild an die Größe des Arbeitsfensters anpassen können. Sobald Sie das gewünschte Ergebnis erhalten (Sie können übrigens die Grenzen des Arbeitsbereichs überschreiten), klicken Sie auf "Datei" - "Speichern unter ..." oder auf die Tastenkombination Strg + S.

Zweiter Weg. Sie müssen zuerst zu Ihrem Computer gehen, dann auf "Datei" - "Öffnen ..." (oder die Kombination von Strg + O) klicken und das gewünschte Bild auswählen. Wählen Sie dann "Bild" - "Bildgröße ..." oder drücken Sie die Kombination Alt + Strg + I. Deaktivieren Sie das Kontrollkästchen "Seitenverhältnis beibehalten" und wählen Sie die gewünschte Größe aus. Drücken Sie dann die OK-Taste.

Bilder sind Teil fast jeder Website, daher ist die Größenänderung unerlässlich. Sie können die Größe des Bildes auf zwei Arten ändern: in einem Grafikeditor oder programmgesteuert im HTML-Code in CSS.

Wenn Sie die Größe des Bildes im CSS-Code in HTML nicht festlegen, stimmen Höhe und Breite der Site in Pixel mit denen der Originaldatei überein. Das heißt, Sie können die Größe eines Bildes ohne CSS und HTML nur mit einem Grafikeditor ändern. Die Größe der Site wird automatisch geändert, wenn Sie die Größe nicht angeben. Es gibt jedoch Fälle, in denen Sie die Größe des Bilds in CSS programmgesteuert in HTML ändern müssen.

1. Ändern Sie das Bild im Grafikeditor

Sie können die Größe des Bilds in einem beliebigen Grafikeditor (Photoshop, Gimp, XNview) ändern. Die Größe der Site wird automatisch entsprechend den ursprünglichen Abmessungen geändert.

Vorteile der Methode:

Das Bild wird schneller geladen, da Sie keine unnötigen Daten (Pixel) herunterladen müssen, die dann programmgesteuert komprimiert werden.

Grafikeditoren komprimieren Bilder mit einer Breite und Höhe von weniger als 200 Pixel schlecht.

Versuchen Sie nach Möglichkeit, die Größe in einem Grafikeditor zu ändern, damit die Bilder schneller geladen werden als bei einer programmgesteuerten Änderung. Der Geschwindigkeitsunterschied kann das Zehnfache betragen.

2. Ändern Sie das Bild im CSS-Code auf der Site

Vorteile:

Das Einstellen der Größe ist schneller und bequemer. Diese Reduktionsmethode wird normalerweise der Einfachheit halber verwendet. Wenn ein Bild beispielsweise viele verschiedene Größen haben kann, ist es häufig bequemer, die Werte programmgesteuert zu ändern, als alle Formatoptionen eines Bildes hochzuladen, die in einem Grafikeditor bearbeitet wurden.

Kleine Bilder mit einer Höhe oder Breite von weniger als 200 Pixel werden im Gegensatz zu Grafikeditoren effizient komprimiert. Wenn Ihre Website weniger als 200 Pixel groß sein soll, ist es besser, die Originalgröße um 30-50% (260-300 Pixel) zu vergrößern, um beim Verkleinern eine gute Qualität zu erhalten.

Gleichzeitig ist der Unterschied in der Geschwindigkeit des Ladens der Site nicht zu spüren, da kleine Bilder nur sehr wenig Platz beanspruchen und bei einer Vergrößerung um 30% keine Änderungen bemerken. Beachten Sie jedoch den Qualitätsunterschied.

Das Laden programmgesteuert komprimierter Bilder dauert länger, da die Größenänderung erst nach dem Herunterladen der Originalversion erfolgt. Wenn das Bild mehr als 200 Pixel breit oder hoch ist, ist es daher besser, es in einem Grafikeditor zu komprimieren, damit die Site schneller funktioniert.

So ändern Sie die Bildgröße in HTML mithilfe von CSS

Um die Größe von Bildern in HTML mithilfe von CSS-Eigenschaften zu ändern, werden diese verwendet breite und Höhe innerhalb des Stilattributs. Sie können nur Breite oder Höhe schreiben, und der verbleibende nicht angegebene Wert ändert sich automatisch, während das Seitenverhältnis des Bildes beibehalten wird. Wenn Sie beispielsweise nur die Breite eines Bildes mithilfe der Breite angeben, ändert sich seine Höhe automatisch, wobei das Seitenverhältnis beibehalten wird. Und umgekehrt, wenn Sie nur die Höhe angeben, ändert sich auch die Breite automatisch, wobei das Seitenverhältnis des Bildes beibehalten wird.

Beispielcode ohne Angabe der Bildgröße

Ergebnis im Browser

Seitencode

Beispielcode mit Bildgrößenänderung in .css

Ergebnis im Browser

Seitencode

style \u003d "width: 150px;"\u003e

In beiden oben gezeigten Beispielen wird dasselbe Bild mit einer Größe von 300 x 184 Pixel (Breite und Höhe) verwendet. In einem Beispiel wurde das Bild im Browser ohne Änderungen mit der Originalgröße von 300 x 184 Pixel angezeigt, da die Breite und Höhe im CSS nicht angegeben wurden. In Beispiel 2 wurde das Bild im Browser um das Zweifache reduziert angezeigt, da die Breite auf 150 Pixel eingestellt war. Die Höhe wurde entsprechend automatisch auf 92 Pixel geändert. Wie Sie sehen, muss die Eigenschaft height überhaupt nicht angegeben werden, da sie sich automatisch proportional zur Breite ändert.

Wenn Sie beide Parameter angeben: breite (Breite), Höhe (Höhe) und sie entsprechen nicht den Proportionen, dann hat das Bild genau diese Größe, sondern in komprimierter oder gestreckter Form, abhängig von den Werten.

Warum ist es unerwünscht, Bilder zu vergrößern?

Wichtig: Das Vergrößern des Bildes geht mit einem Qualitätsverlust einher. Wenn Sie sich in irgendeiner Weise ändern, ist es wichtig, die Werte kleiner als im Originalbild einzustellen, d. H. Nur zu reduzieren.

Wenn Sie die Größe in Pixel einstellen, die größer als das Originalbild sind, verschlechtert sich die Qualität. Und der Qualitätsverlust wird deutlich sichtbar, da der Computer keine neuen Pixel hinzufügen kann, sondern nur die Größe bestehender Pixel erhöhen kann. Je stärker das Bild vom ursprünglichen Wert vergrößert wird, desto schlechter ist seine Qualität und desto deutlicher sind quadratische Pixel sichtbar.

Bevor Sie die Frage beantworten “ wie füge ich ein Bild in HTML ein?», Es ist zu beachten, dass es sich nicht lohnt, Webseiten mit einer großen Menge an Grafikmaterial zu überladen, da dies nicht nur die visuelle Wahrnehmung der Ressource durch den Benutzer verbessert, sondern auch die Ladezeit der Seite erhöht.

PNG-, GIF- und JPEG-Grafikformate werden am häufigsten zum Erstellen von Websites und zum Entwerfen von Bildern verwendet - der Grafikeditor Adobe Photoshop bietet umfangreiche Funktionen zum Komprimieren und Ändern der Größe von Bildern ohne Qualitätsverlust, was für die Webentwicklung unglaublich wichtig ist.

Wie füge ich ein Bild in HTML ein?

Um ein Bild in eine HTML-Seite einzufügen, wird ein einzelnes einfaches Tag verwendet:

,

dabei ist xxx die Bildadresse. Befindet sich das Bild im selben Verzeichnis wie die Seite, sieht das Tag folgendermaßen aus:

Das schnelle und stabile Internet hat jedoch noch nicht alle Ecken der Welt erreicht, und es kommt daher vor, dass das Bild auf der Website einfach nicht geladen wird. Für solche Fälle gibt es das Konzept eines alternativen Textes.

Es wird anstelle des Bildes angezeigt, wenn es nicht verfügbar, geladen oder im Browsermodus "Keine Bilder" ist. Es wird mit dem alt-Attribut des Tags hinzugefügt .

Ein Beispiel für das Hinzufügen von alternativem Text zu einer Grafikdatei:

Größenänderung von Bildern in HTML

Verwenden Sie zum Ändern der Anzeigeabmessungen einer Grafikdatei die Tags height und width, wobei height die Höhe und width die Breite ist, gemessen in Pixel.

Bei Verwendung dieser Attribute weist der Browser zunächst Platz für Grafikinhalte zu, bereitet das allgemeine Seitenlayout vor, zeigt den Text an und lädt dann das Bild selbst.

Das Bild wird in einem Rechteck mit den angegebenen Abmessungen platziert. Wenn die Parameter kleiner oder größer als das Original sind, wird das Bild gestreckt oder komprimiert.

Wenn die Attribute height und width nicht verwendet werden, lädt der Browser das Bild sofort und verzögert die Anzeige von Text und anderen Seitenelementen.

Diese Parameter können sowohl in Pixel (die Größe des Bildes ist konstant und hängt nicht von der Bildschirmauflösung des Benutzers ab) als auch in Prozent (die Größe des Bildes hängt von der Bildschirmauflösung ab) angegeben werden.

Zum Beispiel:

Denken Sie daran, dass Sie in dem Moment, in dem Sie die Größe des Bildes ändern, das Seitenverhältnis beibehalten müssen.

Dazu reicht es aus, nur den Wert eines der Parameter anzugeben ( breite oder Höhe), und der Browser berechnet den Wert der Sekunde automatisch.

Bildposition in HTML

Wie bei vielen HTML-Tags Wenden wir das Attribut align an, mit dem das Bild ausgerichtet wird:

- Das Bild befindet sich über dem Text.

- Das Bild befindet sich unter dem Text.

- Das Bild befindet sich links vom Text.

- Das Bild befindet sich rechts vom Text.

Bild verknüpfen

Dies geschieht wie folgt:

Wie Sie sehen können, kann die grafische Einfügung ein Link sein und beim Klicken zu einer beliebigen Adresse umleiten, die in vollständiger oder abgekürzter Form aufgezeichnet wurde.

Wie kann ich aus einem Bild einen Hintergrund in HTML machen?

Das Bild kann nicht nur als sichtbares Objekt in die Seite eingefügt, sondern auch als Hintergrund erstellt werden. Um ein Bild als Hintergrund zu definieren, muss das Attribut background \u003d "xxx" in das Tag geschrieben werden, wobei xxx die Bildadresse ist, die auf die gleiche Weise wie in den obigen Beispielen angegeben wurde.

Lassen Sie uns beispielsweise das folgende Texturbild als Hintergrundbild festlegen:

Speichern Sie das Bild in einem Ordner mit einer vorbereiteten Seite und schreiben Sie die folgenden Zeilen:

Hintergrund mit Text.

Das Hintergrundbild auf der Seite ist eingestellt.