1:1 Bild skalieren

  • Hallo

    Hat jemand eine Idee wie ich ein Bild das nicht Quadratisch ist auf eine Format das 1:1 ist zu bringen und sie ebenfalls zu skalieren?

    So würde mein Lösungsansatz aussehen


    LG;)

  • Dies müsste das sein, was Du dir vorstellst:

    Code
    <style>
     .box { display: inline-block; border: 2px solid red; }
     .box img { width: 90vw; height: 90vw; object-fit: fill; }
    </style>
    <div class="box"> <img src="images/dia0.jpg"> </div>

    Allerdings, wenn Du den fill-Modus verwendest, braucht es kein object-fit:

    Code
    <style>
     .box2 { width: 90vw; height: 90vw; display: inline-block; border: 2px solid red; }
     .box2 img { width: 100%; height: 100%; }
    </style>
    <div class="box"> <img src="images/dia1.jpg"> </div>

    Aaaarg, leider ist beim Posten meine Formatierung kaputt gegangen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!