In HTML/CSS kann ein Benutzer ein Bild, Videos oder Links zu einer Website hinzufügen. Manchmal haben Benutzer jedoch Schwierigkeiten, das Bild zu ändern oder die Bildgröße anzupassen, ohne es zu dehnen. Zu diesem Zweck ermöglicht CSS seinen Benutzern, verschiedene Eigenschaften zu nutzen, z. B. die “Objektfit”CSS -Eigenschaft. Diese Eigenschaft kann die Bildgröße ohne Dehnen füllen.

Dieser Beitrag wird erklären:

• So fügen Sie ein Bild in HTML hinzu?
• So füllen Sie die CSS -Bildgröße ohne Dehnung?

So fügen Sie ein Bild in HTML ein?

Die Bilder auf der HTML -Seite können auf so viele Arten angehängt werden. Allerdings das “Tag ist eines der größten genutzten Elemente, um Bilder einzubetten.

Wenn der Benutzer der HTML -Seite ein Bild hinzufügen möchte, sehen Sie sich die angegebenen Anweisungen an.

Schritt 1: Überschrift hinzufügen

Fügen Sie zunächst eine Überschrift mit der "hinzu"

" Schild. Fügen Sie dann den Text zwischen dem angegebenen Überschriften -Tag hinzu.

Schritt 2: Bild hinzufügen

Als nächstes setzen Sie eine “ein“Tag zusammen mit den folgenden Attributen:

• Der "KlasseDas Attribut wird verwendet, um auf das Element nach Klassennamen zuzugreifen.
• Der "srcDas Attribut wird zum Hinzufügen des Bildpfads oder der URL verwendet.
• “BreiteGibt die Größe des Bildes horizontal an.
• “Höhe”Zugewiesen die Höhe des Bildes:

Bild hinzufügen

Die Ausgabe zeigt, dass das Bild erfolgreich hinzugefügt wurde:

So füllen Sie die CSS -Bildgröße ohne Dehnung?

Probieren Sie die angegebenen Anweisungen aus, um die Bildgröße der CSS -Bildgröße zu füllen, ohne sie zu dehnen.

Erstens zu "auf die" zu ""Element verwendet".AbdeckungUnd wenden Sie die folgenden CSS -Eigenschaften an:

.Abdeckung
Objekt-Fit: Deckung;
Breite: 50px;
Rand: 20px;
Höhe: 100px;

Die Beschreibung des oben genannten Code ist wie folgt:

• Der "ObjektfitDie Eigenschaft wird zum Angeben verwendet. Zum Beispiel haben wir seinen Wert als "als" festgelegt "Abdeckung”.
• “BreiteGibt die Größe der Bildbreite an.
• “Rand”Zugewiesen den Raum um die Grenze eines Elements.
• “Höhe”Definiert die Bildhöhe in einem Behälter.

Es kann beobachtet werden, dass das Bild geändert und gefüllt wurde, ohne sich zu dehnen:

Das ging darum, das Bild zu füllen, ohne sich zu dehnen.

Abschluss

Um die Bildgröße ohne Dehnen zu füllen, fügen Sie zunächst ein Bild mit Hilfe des “hinzu”Tag zusammen mit dem Klassenattribut. Greifen Sie dann mit dem Klassennamen auf das Bild zu und wenden Sie die “anObjektfit"CSS -Eigenschaft als"Abdeckung”. Wenden Sie außerdem andere CSS -Eigenschaften für das Styling an, wie zBreite","Höhe", Und "Rand”. Dieser Beitrag hat die Methode zur Größe und Füllung des Bildes ohne Dehnen gezeigt.