Разработка на Eclipse 3.4, работа Eclipse 3.3

Вы можете использовать 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%;" />