Elliot inspired me to this solution - thanks:
aspectratio.png
is a completely transparent PNG-file with the size of your preferred aspect-ratio, in my case 30x10 pixels.
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
Please note: background-size
is a css3-feature which might not work with your target-browsers. You may check interoperability (f.e. on caniuse.com).