html - レスポンシブ CSS と画像

Question

以下に投稿された画像で次のことを達成しようとしています。ブラウザのサイズを変更すると、画像とボタンのサイズが小さくなりますが、メインの背景と同じ比率が維持されます。また、テキストが画像に重ならないようにして、フォントサイズを小さくする必要があります。cssでこれを達成するにはどうすればよいですか? 画像はこちら: http://i.imgur.com/2qR2y4E.png

これは正しいと思われる HTML コードです。画像の CSS 絶対配置を試してみました。各要素を浮動させ、幅にパーセンテージを使用してみました。モバイルの幅になったら、画像に display:none を表示しますが、ボタンはそのままにします。どんな助けでも大歓迎です。

<div class="content">
  <div class="text>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
  </div>
  <div class="image">
    <img src=".." />
    <div class="button"></div>
  </div>
</div>