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

Question

我想要一张图片在左边，标题在右边。我希望它们都随着页面缩小而缩放大小和间距。我使用了这段代码：width: 10%; height: auto; margin: 2% 0px; 将图像放在页面的左上角，并在浏览器缩小时缩放页面的间距和大小（我还包括了媒体查询，我认为这不会做出改变）。我试过使用 positioning: absolute 但不起作用。我是使用 HTML5 和 CSS3 的新手。这是我在 Stack Overflow 上的第一个项目和第二个 post。

Answer 1

你能做一个http://jsfiddle.net/吗？仅根据我们的描述很难理解您的需求。

Answer 2

我想这就是你想要做的 HTML

 <div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>

CSS

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

你可以在这里查看 jsfidlle

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

How to get a heading to scale with a image and keep spacing ratio html/css

html

css

image

spacing