Вы можете использовать svg. Сделайте положение контейнера / обертки относительным, сначала установите svg как статически, а затем разместите абсолютно позиционированное содержимое (сверху: 0; слева: 0; справа: 0; внизу: 0;)
Пример с 16: 9 пропорций:
image.svg: (может быть встроено в src)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS:
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
HTML:
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
Обратите внимание, что встроенный svg не работает, но вы можете urlencode svg и вставить его в атрибут img src следующим образом:
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />