So ändern Sie die Größe des Bildes in CSS

Während der Entwicklung einer Website verwenden wir häufig die Bilder, die aus dem Internet heruntergeladen wurden. Es besteht jedoch die Möglichkeit, dass sich das heruntergeladene Bild nicht in der richtigen Größe befindet. In einer solchen Situation besteht die ideale Lösung darin, das gewünschte Bild zu ändern.

Es gibt verschiedene Möglichkeiten, ein Bild zu ändern. Gehen Sie für CSS, wenn es darum geht, den schnellsten und effizientesten Weg zu finden. CSS bietet unterschiedliche Eigenschaften, die verwendet werden können, um die Größe der Bilder entsprechend Ihren Vorlieben zu ändern.

In diesem Artikel wird die Methoden zur Änderung der Größe von Bildern mithilfe von CSS demonstriert.

Wie man die Größe eines Bildes in CSS verändert?

In CSS können Sie die folgenden Eigenschaften zur Änderung eines Bildes verwenden:

• Eigenschaften der Höhe und Breite
• Objekt-Fit-Eigenschaft
• Hintergrundgröße

Wir werden jede der genannten Methoden nacheinander durchlaufen!

Methode 1: Verwenden Sie die Eigenschaften der Höhe und der Breite, um das Bild in CSS zu ändern

In CSS wird die Höhe der Höhe verwendet, um die Höhe der HTML -Elemente anzupassen. Auf die gleiche Weise ist die Breite Eigenschaft sehr nützlich für die Einstellung der Elementbreite.

Wenn Sie nur bereit sind, das zu ändern, “Höhe”Des Bildes, dann lesen Sie die folgende Syntax:

Höhe: 85%;

Hier, "85%”Repräsentiert den Wert der Höhe der Höhe.

Allerdings das Bild ändern “Breite”, Setzen Sie seinen Wert gemäß Ihren Vorlieben:

Breite: 85%;

Notiz: Verwendung der "Auto”Da der Wert von Höhen- und Breiteneigenschaften dazu beiträgt, die Reaktionsfähigkeit des Bildes in Bezug auf verschiedene Geräte aufrechtzuerhalten.

Manchmal ist es jedoch notwendig, das Bild horizontal und vertikal zu ändern. Wenn dies der Fall ist, können Sie den Eigenschaften der Höhe und Breite einen bestimmten Wert zuweisen.

Beispiel

In diesem Beispiel werden wir das folgende Bild ändern:

Um das angegebene Bild zu ändern, werden wir den Wert der Höhe der Höhe als “festlegen55%"Und Breite als"70%”In CSS -Datei:

Geben Sie die Bildquelle an “src" im "”Tag der HTML -Datei:

Wir haben das Bild mit den genannten Eigenschaften erfolgreich geändert.

Methode 2: Verwenden Sie die Objekt-Fit-Eigenschaft, um die Größe des Bildes in CSS zu ändern

In CSS, die “ObjektfitDie Eigenschaft wird verwendet, um ein Bild automatisch an seinen Container anzupassen. Mit dieser Eigenschaft können wir ein Bild mit den eingetragenen Werten in den Container passen:

• füllen: Wenn das Bild in Bezug auf den Behälter gedehnt wird, kann es geändert werden, um in den Behälter zu passen.
• enthalten: Unter Verwendung dieses Eigenschaftswerts behält das ausgewählte Bild sein Seitenverhältnis bei. Es wird jedoch geändert, dass es in den Container passt.
• Abdeckung: Es ermöglicht das Bild, den gesamten Container abzudecken.
• keiner: Die Größe des Bildes bleibt gleich.
• herunterskalieren: Wenn der Objekt-Fit-Eigenschaftswert als skalierter Einstellung festgelegt wird, überprüft es, ob das Bild gleich groß bleibt oder die Größe in den Container angepasst wird.

Beispiel

Wir werden dasselbe Bild verwenden und seinen Objekt-Property-Wert als "festlegen" festlegen "enthalten”. Infolgedessen behält das ausgewählte Bild sein Seitenverhältnis bei, wird jedoch so geändert, dass sie in denselben Container angepasst werden:

Bild erfolgreich in den Behälter eingebaut. Sie können jedoch Deckung, Füllung oder Skalierung verwenden, um die gewünschte Bilddimension zu erreichen:

Methode 3: Verwenden Sie die Eigenschaft in der Hintergrundgröße, um die Größe des Bildes in CSS zu ändern

Um ein Hintergrundbild in CSS zu ändern, können Sie einfach die „verwenden“Hintergrundgröße" Eigentum. Diese Eigenschaft ist ideal für die Anpassung von Hintergrundbildern.

Schauen Sie sich die Beschreibung der verschiedenen Werte an, bevor Sie tiefer springen:

• Auto(Standardwert): Durch Einstellen der Eigenschaft in der Hintergrundgröße als "Auto”, Das Bild bleibt in seiner ursprünglichen Größe.
• Abdeckung: Dieser Wert erzwingt das Bild, um den gesamten Container abzudecken, wenn Platz vorhanden ist.
• enthalten: Um sicherzustellen, dass das Bild vollständig sichtbar ist, verwenden Sie “enthalten”Als Wert der Hintergrundgröße Eigenschaft.

Beispiel

Wir werden jetzt die Größe der Größe des “Bild.png"Durch Festlegen des Werts seiner Eigenschaft in der Hintergrundgröße als"enthalten”. Um die Wiederholung des Bildes zu vermeiden, werden wir das verwendenHintergrund Wiederholung"Eigenschaft und setzen Sie ihren Wert auf"No-Repeat”. Darüber hinaus, "250pxPolster wird benötigt, um den Inhalt im Container zu padeln.

Hier ist Beispiel ein "Ausweis" des "divContainer:

Als nächstes zuweisen die “BeispielID zum und einen Text mithilfe des Textes hinzufügen

Schild:

TEXT

Der angegebene Wert der Eigenschaft in der Hintergrundgröße macht das Bild vollständig sichtbar. Sie können jedoch jeden Wert entsprechend Ihren Vorlieben festlegen:

Wir haben die erforderlichen Anweisungen zur Änderung eines Bildes in CSS gegeben.

Abschluss

Um das Bild mithilfe von CSS zu ändern, können Sie die Eigenschaft Höhe oder Breite verwenden. CSS-Objekt-Fit-Eigenschaft kann auch dazu beitragen, ein Bild in Bezug auf seinen Container anzupassen. Die Verwendung der Objekt-Fit-Eigenschaft hilft Ihnen bei der automatischen Aufliegerung des Bildes. Darüber hinaus kann die Eigenschaft mit Hintergrundgröße auch für den genannten Zweck verwendet werden. Dieser Artikel hat die beiden effizienten Methoden zur Änderung eines Bildes in CSS beschrieben.