Html 带有图像的响应式CSS

我试图在下面的图片中实现以下目标。调整浏览器大小时，我希望图像和按钮的大小减小，但与主背景保持相同的比例。我还希望文本不要与图像重叠，因此字体大小应该变小。如何在css中实现这一点？图片如下：

这是我认为应该正确的HTML代码。我尝试了CSS图像的绝对定位，我尝试了浮动每个元素并使用宽度百分比。如果达到移动宽度，我只会显示：图像上没有，但保留按钮。感谢您的帮助

<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>

我根据Jake的链接制作了一把小提琴-
当您调整屏幕大小时，它会更改图像和文本框的大小。
这有点粗糙，因此需要您更改css值以满足您的需要。但这对你来说应该是个好的开始

它使用css中的媒体查询来检查最大屏幕大小，然后基于此更改样式

例如，当屏幕大小达到300px或更小时，使用以下样式：

@media screen and (max-width:300px){     
    .image img{width:45px;height:50px;}
    .text{height:30px;font-size:6pt;color:#aaf;}
    .main{width:100px;}
}

希望这有帮助
你能分享你尝试过的CSS吗？StackOverflow并不是为编写整个解决方案而设计的。是的，检查这里：这里有一个他发布的代码：使用媒体查询和div将提供一个潜在的选项，而不仅仅是使用display:none；因为它只会将图像作为背景加载到宽度：百分比样式的div，如果它在您的边界内，否则将被忽略。只需要两个媒体查询块。。