CSS padding – mal nicht in Pixeln, EMS oder REM
padding-top und padding-bottom stellen das padding in der vertikalen Richtung ein. Wenn padding mit Prozent-Werten notiert wird, berechnen es sich nicht aus der Breite des Elements, sondern aus der Breite des des Elternelements.

Auch wenn das Bild ein anderes Seitenverhältnis hat, lässt es sich mit einem Seitenverhältnis 16:7 einsetzen.
Nur das padding zählt
padding zählt mit zur Breite und/oder Höhe. Ein Block, der 800px breit und 0px hoch ist, aber ein padding von 20% hat, hat also ein Platzangebot von 160px.
Hat der Block in einem kleineren ViewPort eine Breite von nur noch 400px, ist sein Platzangebot 400px Breite und 80px Höhe.
<div class="wrapper-16-7"> <div class="inner-box"></div> </div>
.wrapper-16-7 { position: relative; height: 0; padding-top:calc(7/16 * 100%); } .inner-box { position: absolute; top:0;left:0; width: 100%; height:100%; background-image:url(mandarinen.jpg); background-size:cover; box-sizing:border-box; }