Bildgröße proportional mit CSS ändern?

Question

Gibt es eine Möglichkeit, die Größe von Bildern proportional zu ändern (zu verkleinern), indem man nur CSS verwendet?

Ich mache den JavaScript-Weg, aber ich versuche nur zu sehen, ob dies mit CSS möglich ist.

Answer 1

Um die Größe des Bildes mit CSS proportional zu ändern:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Answer 2

Größe kontrollieren und Proportionen wahren :

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Answer 3

Wenn es sich um ein Hintergrundbild handelt, verwenden Sie background-size:contain.

Beispiel css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Answer 4

Versuchen Sie

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Answer 5

Sie können verwenden passendes Objekt Eigentum:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Dadurch wird das Bild angepasst, ohne die Proportionen zu verändern.