CSS -runde Bild

Die Verwendung von Bildern ist im HTML -Code sehr wichtig, insbesondere wenn Sie an einem Website -Projekt mit vielen Bildern gearbeitet haben, die auf der Startseite oder auf anderen Seiten rutschen. Für die Verwendung von Bildern in der HTML -Skriptsprache verwenden wir in der Regel das „IMG“ -Tag darin. Diese Bilder können auf ihre ursprünglichen Größen eingestellt werden, oder die Größe kann auch in Bezug auf die Höhe und die Breite verändert werden. Zusammen mit dem HTML-Sprache bietet Ihnen die Eigenschaft „Border-Radius“, den Radius eines beliebigen Elements wie Überschrift oder Bild zu ändern. Bei Bildern ändert es die Eckform eines Bildes von einem zum anderen. In diesem Artikel werden wir über die Verwendung des Grenz-Radius-Eigentums nachdenken, um ein Bild in eine abgerundete Umwandlung zu konvertieren. Wir werden uns das Bild ansehen, das in den HTML -Codes verwendet wird, um es um den Visual Studio -Code zu formen. Sie können das Bild mit dem Namen „Neu“ sehen.png ”im Screenshot unten angehängt. Wir werden es in unserem Visual Studio -Code verwenden, um es rund zu machen.

Beispiel 01:

Bevor wir ein Bild zu rund gestalten, müssen wir sehen, wie ein Bild in die HTML -Webseite eingefügt werden kann, ohne seine ursprüngliche Form zu ändern. Wir werden also das „neue verwenden.PNG ”Bild in diesem Stück HTML -Code. Wir haben in unserem aktuellen Windows -Verzeichnis eine neue HTML -Datei erstellt und sie "CSS" bezeichnet. Danach haben wir es im Visual Studio -Code geöffnet und das unten gezeigte HTML -Skript hinzugefügt. Dieses Skript wurde mit dem Standard -HTML -Tag „docType“ gefolgt von dem Single -Tag „HTML“ gestartet. Das HTML-Tag zeigt, dass dies eine HTML-basierte Webseite ist und das HTML-Tag nach allen Tags am Ende geschlossen wird.

Nach dem HTML-Tag haben wir die beiden grundlegendsten und am häufigsten verwendeten Tags von HTML-Dateien: Kopf- und Körper-Tags. Das Head-Tag enthält die Informationen zum Header-Titel und zum Styling. Während das Body -Tag alle Daten, Container und andere Elemente mit den anderen Tags enthält. Im Moment haben wir das Kopf -Tag leer gelassen und das Überschriften -Tag der Größe „2“ und das Bild „IMG“ im Tag "Körper" hinzugefügt. Das Überschriften -Tag wird verwendet, um einfach zu Beginn einer HTML -Webseite eine Überschrift zu setzen, während das Bild -Tag zum Einfügen der neuen verwendet wurde.PNG -Bild auf der Webseite mit der Variablen „SRC“.

Außerdem haben wir das Tag "Style" im "IMG" -Tag verwendet, um die Breite "200 Pixel" eines Bildes mit der Eigenschaft "Breite" eines Bildes festzulegen. Die Körper- und HTML -Tags wurden hier geschlossen.

Speichern wir unseren Code einfach in der Datei, indem wir Strg+S verwenden und ihn mit der Schaltfläche "Ausführen" in der Taskleiste des Visual Studio -Codes debuggen. Sie werden nach der Browser -Plattform aufgefordert, auf der Sie möchten, dass sie ausgeführt wird. Wir haben Chrome ausgewählt, um es auszuführen. Die Ausgabe wurde unten gezeigt. Die HTML -Webseite zeigt die schwarze Überschrift von Größe 2 an. Das Bild wurde mit seiner ursprünglichen Form mit einer anderen Größe angezeigt. Die Breite entspricht 200 Pixel, wie in der Style -Eigenschaft festgelegt.

Schauen wir uns an, unser Bild „rund“ in demselben HTML -Code zu formen. Zu diesem Zweck müssen wir dieselbe HTML -Datei im Visual Studio -Code öffnen und aktualisieren. Wie Sie wissen, liegt die Änderung der Bildform im Abschnitt mit dem Styling. Wir müssen also das CSS -Styling in diesem HTML -Code mit Hilfe eines „Stil“ -Tags im Header oder „Head“ -Tag verwenden. Der Rest des Codes bleibt intakt und wird nicht aktualisiert.

Jetzt müssen wir im "Stil" -Tag dieses Code -Headers den Namen eines zu aktualisierten Elements erwähnen (i.e., Das "IMG" -Tag.) Fügen Sie lockige Klammern hinzu und fügen Sie Eigenschaften hinzu, um das Element entsprechend Ihrem Bedarf zu ändern. Wir haben also die Eigenschaft „Border-Radius“ in den lockigen Klammern eines „IMG“ -Tags verwendet, um seinen Wert als 50 Prozent anzugeben. Sie können auch Pixel über einen Prozentsatz hinzufügen, wenn es darum geht, ein Gerät für jeden numerischen Wert im CSS -Styling auszuwählen. Hier geht es um die Veränderung. Sparen wir zuerst diesen Code. Nachdem wir diesen Code mit Strg+S gespeichert haben, müssen wir ihn einfach mit der Schaltfläche "Ausführen" aus der Visual Studio -Code -Taskleiste ausführen. Auch hier müssen Sie den Browser auswählen, in dem Sie seine Ausgabedaten anzeigen sollen.

Das Ausführen dieses Code würde uns zum unten angezeigten Ausgang führen. Die Verwendung von Grenz-Radius-Immobilienwerten bis zu 5 Prozent macht das Bild „neu.png ”quadratisch zu rund. Die Kanten würden abgerundet, wie im Bild unten gezeigt. Hier geht es darum, die Rand-Radius-Eigenschaft zu verwenden, um ein einfaches Bild mit einer einfachen quadratischen Form in eine abgerundete Form oder andere Form umzuwandeln.

Beispiel 02:

Die gleiche Eigenschaft kann auf andere Weise verwendet werden, um die Form eines Bildes zu verändern. In diesem Beispiel werden wir sehen, wie zufällige Werte die Form eines einfachen Bildes verändern können. Innerhalb des Body -Tags dieses HTML -Skript. In all diesen 4 Tags haben wir das gleiche „Neu“ verwendet.PNG ”Bild wiederholt mit der Breite von 200 Pixel für jede Form.

Um die Form der Bilder in einem Stil -Tag separat zu verändern, müssen wir sie mit verschiedenen Klassen angeben: A, B, C und D, wie in jedem „IMG“ -Tag gezeigt. Innerhalb des Style -Tags haben wir die „IMG“ -Tags zusammen mit ihren angegebenen Klassen (A, B, C und D) verwendet, um die Ecken jeder Form getrennt zu verändern. Die Werte 50%, 0%, 20%und 250%15%wurden für 1., 2., 3. und 4. Bilder verwendet. Lassen Sie uns diesen Code ausführen, um die Ergebnisse zu sehen.

Die 4 verschiedenen Formen eines Bildes wurden wie unten gezeigt erzeugt.

Die gleichen oder ähnlichen Formen können mit der einfachen Rand-Radius-Eigenschaft mit den 4 Seitenwerten gleichzeitig erreicht werden: oberer links, oberer rechts, unterer Links und unten rechts, wie unten gezeigt. Wir haben diese einfache Rand-Radius-Eigenschaft für 4 Ecken zusammen mit der Breite und der Höhe von Bildern ausprobiert, die auf 150 Pixel für alle eingestellt sind. Lassen Sie uns diesen Code speichern und ausführen.

Mit einem einfachen Format für das Rand-Radius-Grund.Png ”Bild.

Abschluss:

Die Verwendung und Bedeutung des „IMG“ -Tags wurde zusammen mit der Verwendung des Grenz-Radius-Eigentums diskutiert. Wir haben diskutiert, wie eine Border-Radius-Eigenschaft die Kanten eines Bildes oder der Überschrift in verschiedene Formen mit den einfachen Oberteil, unten, links und rechten Werten verändern kann. Dafür haben wir sehr einfache und grundlegende Beispiele für das HTML -Skript diskutiert, indem wir ein einzelnes Bild innerhalb des Tags „IMG“ verwenden und es stylen. Wir haben unsere Ziel.