如何使标题与图像成比例并保持间距比html/css

我想在左边有一张图片，右边有一个标题。我希望它们都能随着页面的缩小在大小和间距上进行缩放。我用过这个代码：

width:10%；高度：自动；利润率：2%0px

将图像放在页面的左上角，并在浏览器收缩时缩放到页面的间距和大小（我还包括了媒体查询，我认为这不会有什么不同）。我试过使用

positioning:absolute

，但不起作用。我是使用HTML5和CSS3的新手。这是我的第一个项目，也是关于堆栈溢出的第二篇文章。

你能做一个简单的解释吗？

---

仅仅根据我们的描述，很难理解你在追求什么。

我想这就是你想要做的 HTML

你可以在这里查一下

---

应该是

位置：绝对
，而不是
定位
。但是你应该发布你尝试过的代码，并解释出哪里出了问题——这将极大地帮助任何帮助你的人。我尝试过使用视口，但不完全理解它们是如何工作的。当我使用它们时，文本开始太大，然后收缩得太小。我拿不出正确的比例。编辑：还尝试使用“float:left；”在图片上，这解决了部分问题，现在我需要知道的是如何确定大小和间距比；e、 否则，只需将空的img src与alt=“placeholder image”或类似的内容一起使用即可*编辑：或者，如果你的网站在线，你能提供一个链接吗？
 <div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>

div.wrapper {
   width: 100%; 
   height: auto; 
   max-width: 600px; 
   border: thin solid #333;
 }
div.wrapper:after {
   content: '';
   display: block;
   clear: both;
}
div.wrapper img {
   display: block; 
   float: left; width: 40%; 
   height: auto; 
   margin-right: 5%;
}
div.h1 {
   display: inline-block;
   line-height: 20px;
   margin: 0px;
   padding: 0px;
}