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

img{
    max-width:100%;
    object-fit: scale-down;
}

funktioniert für mich. Größere Bilder werden verkleinert, damit sie in den Kasten passen, aber kleinere Bilder bleiben in ihrer ursprünglichen Größe.

Answer 2

Ich glaube, dies ist der einfachste Weg, es zu tun, auch möglich, durch die Inline style Attribut innerhalb der <img> Tag.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

oder

<img src="flower.png" style="transform: scale(0.7);">

Answer 3

Verwenden Sie diese einfache Skalierungstechnik

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Answer 4

img {
    max-width:100%;
}

div {
    width:100px;
}

Mit diesem Snippet können Sie dies auf effizientere Weise tun

Answer 5

Wir können die Größe von Bildern mit CSS im Browser ändern, indem wir Media Queries und das Prinzip des Responsive Design verwenden.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}