CSS-Größen-/Zoom-In-Effekt auf das Bild, während die Abmessungen beibehalten

Bilder sind der wichtigste und wichtigste Teil der Webentwicklung. Manchmal fügen Webentwickler verschiedene Effekte auf Bilder hinzu, um die Webseite attraktiver zu machen, einschließlich des Umdrehens der Bilder, des Zoomens, der Vergrößerung von Effekten usw. Insbesondere im Zoom-In-Prozess wird ein Bild nach Bedarf größer. In einem Bildbieter ist der Zoom-In-Prozess sehr wichtig. Um diesen Prozess zu erhalten, können Benutzer die “verwenden“Skala()" Und "übersetzen()”Methoden.

Diese Beschreibung wird untersucht:

• So fügen Sie ein Bild in HTML ein?
• Wie Sie die Größe/Zoom-In-Wirkung auf ein Bild haben und gleichzeitig die Abmessungen in CSS behalten?

So fügen Sie ein Bild in HTML ein?

Um ein Bild in HTML hinzuzufügen, müssen Benutzer diesen angegebenen Schritten befolgen.

Schritt 1: Erstellen Sie einen Div -Container

Nutzen Sie zuerst die “divElement zum Erstellen eines Div -Containers. Fügen Sie dann ein Klassenattribut ein und geben Sie einen bestimmten Namen dafür an

Schritt 2: Fügen Sie ein Bild hinzu

Fügen Sie als nächstes ein Bild mit Hilfe des “hinzu“" Schild. Geben Sie im IMG -Tag die folgenden Attribute an:

• “srcDas Attribut wird verwendet, um eine Mediendatei hinzuzufügen.
• “Alt”Wird verwendet, um den Text auf einem Bild anzuzeigen, wenn das Bild aus irgendeinem Grund nicht angezeigt wird:

Es kann beobachtet werden, dass ein Bild erfolgreich hinzugefügt wurde:

Wie Sie die Größe/Zoom-In-Wirkung auf ein Bild haben und gleichzeitig die Abmessungen in CSS behalten?

Um die Größe/Zoom in einem Bild zu ändern, während Sie die Abmessungen beibehalten, erhalten Sie auf das Bild mit einem “:schweben"Effekt und bewerben"verwandeln"Mit Wert"Skala (2.0)”

Probieren Sie die unten angegebenen Anweisungen aus, um dies zu tun.

Schritt 1: Stylen Sie den Div -Container "Div"

Greifen Sie mit dem Klassennamen auf den Container "Div" zu ".".IMG-Inhalt”Und wenden Sie die unten aufgeführten CSS -Eigenschaften an:

.IMG-Content
Anzeige: Inline-Block;
Überlauf: Initial;
Rand: 20px 100px;
Polsterung: 40px;
Breite: 300px;
Höhe: 300px;
Hintergrundfarbe: RGB (233, 146, 16);

Hier:

• “AnzeigeDie Eigenschaft wird zum Einstellen der Anzeige für ein Bild verwendet. Dazu wird der Wert dieser Eigenschaft als “festgelegt“Inline-Block”.
• “Überlauf„Steuert den Inhalt, der für die Einstellung in einen Bereich langwierig ist.
• “Rand”Definiert einen Raum auf der äußersten Seite der Grenze des Elements.
• “Polsterung”Wird verwendet, um Platz im definierten Bereich zuzuweisen.
• “Breite”Wird verwendet, um die Breite des Elements festzulegen.
• “HöheEigenschaft verteilt die besondere Höhe für ein Element.
• “HintergrundfarbeGibt eine Farbe für die Rückseite eines Elements an.

Ausgang

Schritt 2: Bewegen Sie sich auf das Bild an

Zugriff auf das Bild mit dem Schwebeffekt als “IMG: Schwebe”:

IMG: Hover
Transformation: Skala (2.0);

Dann wenden Sie die “an“verwandelnEigenschaft, die zum Festlegen der 2D- oder 3D -Transformation für ein Element verwendet wird. Zu diesem Zweck wird der Wert dieser Eigenschaft als Skala festgelegt (2.0). Genauer gesagt das “Skala()”CSS -Funktion wird zur Definition der Transformation verwendet, die zur Größe des Elements in der 2D -Ebene verwendet wird.

Ausgang

Das dreht sich um diesen Beitrag für den Zoom-In-Effekt auf ein Bild, während die Abmessungen beibehalten werden.

Abschluss

Um die Größe/Zoom in einem Bild zu ändern, fügen Sie zuerst ein Bild in die HTML -Seite ein und wenden Sie dann die CSS -Eigenschaften an, einschließlich “Anzeige”Um die Anzeige des Elements festzulegen und“Überlauf”, Der zur Steuerung des Inhalts verwendet wird, der zu groß ist, um in einen Bereich zu passen. Danach greifen Sie mit dem Bild auf das Bild zu “:schweben"Effekt und wenden Sie die Transformationseigenschaft mit dem Wert an"Skala (2.0)”Zur Änderung des Elements in der 2D -Ebene. Dieser Beitrag hat die Methode zur Größe von Größen/Zoomen in einem Bild erläutert, während die Dimension beibehalten wird.