Wie kann ich Bilder in HTML bewegen und in der größe anpassen?

Hi,

Kann mir jemand dabei helfen, dass mein Bild vom Warenkorb oben rechts, neben dem Login, auf meiner Website angezeigt wird und wie kann ich es schaffen das mein anderes Bild den iFrame komplett ausfüllt? Ich weiß bereits, dass dies durch CSS möglich sein soll aber wie, weiß ich nicht.

Vielen Dank an die, die mir helfen können

Answer 1

[regex9]

(...), dass mein Bild vom Warenkorb oben rechts, neben dem Login, auf meiner Website angezeigt wird (...)

Der Warenkorb müsste der Logik zufolge ein eigener Listenpunkt (z.B. hinter dem Punkt für Login) sein. Eigentlich sogar ein Link oder ein Button.

<li>
  <a href="...">
    <img alt="Zum Warenkorb" class="basket-image" height="30" src="..." width="30">
  </a>
</li> 

Das Größenverhältnis des Bildes kannst du mit den Attributen height und width festlegen. Im Attributwert dürfen nur Ziffern stehen.

Zusätzlich könntest du mit CSS eine spezifische Breite setzen, auf die es skaliert werden soll. Aus diesem Grund habe ich im obigen Beispiel das Element schon mit einem class-Attribut ausgestattet.

Beispiel:

.basket-image {
  height: auto;
  width: 50px;
}

(...) und wie kann ich es schaffen das mein anderes Bild den iFrame komplett ausfüllt?

Ein iFrame ist an dieser Stelle nicht sonderlich sinnvoll. Dieses Element ist für den Anwendungsfall gedacht, dass du externe Webseiten, Anwendungen (z.B. Mediaplayer) oder Dokumente (z.B. PDF-Dokumente) einbinden möchtest.

Für Bilder gibt es einfachere Optionen. Nimm einen einfachen div-Container und setze das Bild entweder über einen img-Tag oder als Hintergrundbild ein.

Beispiel:

<div class="stage">
  <img alt="" class="stage-image" height="300" src="your-image.jpg" width="400">
</div>

CSS:

.stage {
  height: 500px;
}

.stage-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

Hintergrundbild-Alternative:

<div class="stage"></div>

CSS:

.stage {
  background-image: url('your-image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

In beiden Beispielen wird das Bild so weit skaliert, bis die komplette Fläche ausgefüllt werden kann. Andere Optionen zu den Properties background-size und object-fit kannst du selbst auf MDN nachschlagen.