😊 🌱 ☀️   
    Blogseite.com



veröffentlicht am: 24. April 2024

HTML: Bild vergrößern, verkleinern, skalieren – So gehts

 Home   ➡️  HTML  ➡️  HTML: Bild vergrößern, verkleinern, skalieren – So gehts

Um ein Bild in HTML zu vergrößern und zu verkleinern, kannst du die width und height Attribute des <img> Tags verwenden. Hier ist ein einfaches Beispiel, wie du ein Bild in HTML vergrößern und verkleinern kannst:

HTML Bild: verkleinern und vergrößern

HTML
<!DOCTYPE html>
<html>
<head></head>
<body>

    <img src="beispielbild.jpg" alt="Beispielbild" width="200" height="200">

</body>
</html>

In diesem Beispiel wird das Bild mit einer Breite und Höhe von 200 Pixeln angezeigt.

Bild vergrößern

HTML
<img src="beispielbild.jpg" alt="Beispielbild" width="400" height="400">

Du kannst die Breite und Höhe des Bildes entsprechend anpassen, um es größer oder kleiner darzustellen

Bild verkleinern

HTML
<img src="beispielbild.jpg" alt="Beispielbild" width="100" height="100">

.Beachte jedoch, dass das Ändern der Breite und Höhe die Proportionen des Bildes verzerren kann, es sei denn, du passt auch das aspect-ratio Attribut oder den CSS object-fit Stil entsprechend an.

HTML: Bild Skalieren

Um ein Bild in HTML zu skalieren, also in seiner Größe zu verändern, kannst du entweder die Breite und Höhe des Bildes direkt im <img> Tag anpassen oder CSS verwenden, um das Bild zu transformieren.

Skalierung mit direkter Angabe von Breite und Höhe im <img> Tag:

HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="beispielbild.jpg" alt="Beispielbild" style="width: 50%; height: auto;">
    <!-- Hier wird die Breite des Bildes auf 50% gesetzt und die Höhe automatisch entsprechend angepasst -->

</body>
</html>

In diesem Beispiel wird das Bild auf 50% der ursprünglichen Breite skaliert, während die Höhe automatisch entsprechend angepasst wird.

  • Du kannst die Prozentangabe in width anpassen, um das Bild mehr oder weniger zu verkleinern bzw. zu vergrößern.

HTML Bild Skalierung mit CSS Transform:

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            transform: scale(0.5); /* Hier wird das Bild auf 50% der ursprünglichen Größe skaliert */
        }
    </style>
</head>
<body>

    <img src="beispielbild.jpg" alt="Beispielbild">

</body>
</html>

hier wird Bild auf 50% der ursprünglichen Größe skaliert, indem die scale() Funktion des transform Eigenschafts verwendet wird. Du kannst den Wert in scale() ändern, um das Bild mehr oder weniger zu skalieren.

Diese beiden Methoden ermöglichen es dir, ein Bild in HTML zu skalieren. Du kannst je nach Bedarf die Methode wählen, die am besten zu deinen Anforderungen passt. Wenn du weitere Fragen hast, lass es mich gerne wissen!

  • Ähnliche Beiträge

        html        html bild vergrößern        html bild verkleinern        html skallieren   

    Über Mich


    Weitere Beiträge auf Blogseite.com




    Kennst du schon diese Memes?



    Smiley Bedeutung