Wie man ein Bild mit CSS beschnitten

In dieser Beschreibung wird erörtert:

• Methode 1: Wie man ein Bild durch „Überlauf: Hidden“ -Mobilie aufnimmt?
• Methode 2: Wie man ein Bild über die Eigenschaft „Hintergrundbild“ bezieht?
• Methode 3: Wie man ein Bild durch „Objektposition“ und „Objekt-Fit“ -Fititäten aufnimmt?

Voraussetzung: Erstellen einer HTML -Datei

Um ein Bild in das HTML -Dokument einzubetten, befolgen Sie die genannten Anweisungen:

• Füge hinzu ein ""Tag, um eine Abteilung zu erstellen und ihm eine Klasse zuzuweisen"IMG-CROP-DIV”. Implementieren “Stil”Attribut, um das Element festzulegen“Rand" Eigentum.
• Verwenden Sie dann das HTML -Tag mit den Attributen „SRC“, „Breite“ und „Höhe“, um ein Bild in das Dokument einzubetten.
• Der "srcDas Attribut legt die Quell -URL fest.
• Der "Breite”Definiert die Breite des Bildes.
• Der "Höhe”Bestimmt die Größe des Bildes.

Html

Es kann beobachtet werden, dass wir das Bild erfolgreich zu unserer Webseite hinzugefügt haben:

Methode 1: Wie man ein Bild durch „Überlauf: Hidden“ -Mobilie aufnimmt?

Wenn der Inhalt des Elements zu groß ist, um in den angegebenen Bereich zu passen, ist der “ÜberlaufDie Eigenschaft wird definiert, um Bildlaufleisten hinzuzufügen. Darüber hinaus kann es auch zum Anschneiden des zusätzlichen Bildes verwendet werden.

Lassen Sie uns unseren Container stylen, um besser zu verstehen.

Stil „IMG-Crop-Div“ -Klasse

Der ".IMG-CROP-DIV"Ist definiert, um auf die Klasse zuzugreifen"IMG-CROP-DIV”. Der "Höhe" Und "BreiteCSS -Eigenschaften werden verwendet, um den Bildbereich zuzuordnen. Dann wird der verbleibende Bereich mit der “abgeschnitten“Überlauf"CSS -Eigenschaft zusammen mit dem Wert"versteckt”.

Ausgang

Passen Sie die Position des beschnittenen Bildes an

Jetzt werden wir sehen, wie Sie die Bildposition anpassen:

Durch die Verwendung des “RandEigenschaft mit den angegebenen Werten für die obere, rechts, linke und unten geholfen uns bei der Anpassung der Position.

Ausgang

Methode 2: Wie man ein Bild über die Eigenschaft „Hintergrundbild“ bezieht?

Der "HintergrundbildDie CSS -Eigenschaft wird verwendet, um die Hintergrundbilder anzugeben. Ein Bild kann jedoch mit dieser Eigenschaft beschnitten werden. Stellen Sie zuerst die Breite und Höhe des enthaltenden Bildes ein. Infolgedessen wird das Bild innerhalb des angegebenen Bereichs angezeigt.

Lassen Sie uns das oben diskutierte Szenario in CSS implementieren:

Hier das "HintergrundpositionDie Eigenschaft wird zur Einstellung der Anfangsposition des Bildes verwendet.

Ausgang

Wie man ein Bild durch die Eigenschaften „Objektfit“ und „Objektposition“ bezieht?

CSS “ObjektfitDie Eigenschaft kann so angegeben werden, dass Bilder leicht zugeschnitten werden. Es hat fünf Werte, aber die “Abdeckung”Ist das am besten geeignete, das man zum Anschneiden von Bildern verwenden kann.

Fügen Sie in CSS den folgenden Code -Snippet für die "hinzu"IMG-CROP-DIV" Klasse:

Hier ist die Beschreibung der angegebenen Eigenschaften:

• Durch Verwendung der “Objektfit: DeckungEigenschaftswert, das Seitenverhältnis des Bildes wird beibehalten, während sie sich noch in den Containerbox einfügen.
• Der "ObjektpositionDie Eigenschaft setzt den Bereich des Bildes auf Ernte.

Ausgang

Wir haben die Methoden zusammengestellt, um ein Bild mit CSS zu beschneiden.

Abschluss

Um ein Bild in HTML zu beschneiden, können mehrere CSS -Eigenschaften verwendet werden. Die am häufigsten verwendeten Eigenschaften für Pflanzenbilder sind “Überlauf" mit "Breite" Und "Höhe","Hintergrundbild","Objektfit", Und "Objektposition”. Dieser Beitrag hat mehrere Methoden zum Anschneiden eines Bildes mit CSS beschrieben.