Größe der Bilder ändern, um% von div nach Fläche abzudecken

Question

Ich arbeite an einer Ionic App. Ich habe ein zweispaltiges Layout von Quadraten, für ein Beispiel sagen wir, sie sind 100x100. Ich möchte die Bilder innerhalb dieser Quadrate neu skalieren und dann zentrieren (horizontal und vertikal).

Die Bilder, die eingefügt werden sollen, haben jedoch keine identischen Seitenverhältnisse. Ich möchte die Größe der Bilder so ändern, dass sie unabhängig von den Abmessungen die gleiche Fläche abdecken.

Zum Beispiel sagen wir, dass jedes Bild 25% meiner Quadrate im Raster abdecken soll. Wenn ich ein 1000x1000 Bild habe, wird es auf 50x50 verkleinert, um 25% der Fläche innerhalb eines Quadrats abzudecken. Wenn ich ein 500x250 Bild hätte, würde es auf ~ 70x35 verkleinert werden.

Mathematisch verstehe ich mindestens einen Weg, wie man das tut: Bilddimension * sqrt ((Bildbreite x Bildhöhe)/(0,25) (div Breite x div Höhe)). Es ist in Code mit Angular, aber ich kämpfe.

Irgendwelche Ratschläge?

Answer 1

Ich würde versuchen, CSS wenn möglich zu verwenden. Es wird viel leichter für den Browser sein, dies zu rendern und viel einfacher für Sie zu implementieren.

Um dies zu tun, erstellen Sie Boxen in Ihrer Vorlage und jede Box wird ein Bild als Hintergrund haben. Sie können das mit dem Attribut ng-style auf der Box festlegen.

In CSS können Sie etwas tun:

.image-box { 
    width: 50px; 
    height: 50px; 
    background-size: cover; 
}