Bildgrößenänderung von proportional zu Wichtiger Teil

[marcohe]

Habe mal eine Frage an die CSS Profis.

Ich würde gerne ab einer Viewport Breite größer 480px Bilder Proportional und in voller Breite anzeigen und
kleiner 480 px nur den Wichtigen Teil ( volle Breite und definierte Höhe z.B. 200px)

Ich nutze Metamodels d.h. die Contao Bildgrößen und MediaQuerys kann ich nicht verwenden. In Metamodels lautet die Grundeinstellung für das Bild ( Proportional 700 x 700px)

Kann mir hier jemand auf die Sprünge helfen?

Beispielseite gibt es auch. Die proportionale Darstellung auf großen Bildschirmen stimmt soweit, nur auf kleinen Bildschirmen wird aktuell bei fest eingestellter Höhe das Bild in die Breite verzerrt...

Beispielseite

PS: Auf dieser Seite kommt Bootstrap und Masonry zum Einsatz. Sollte aber bei dem Problem keine Rolle spielen...