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

Question

I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.

Answer 1

I think this is what you are trying to do 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;
}

You can check it here jsfidlle

Answer 2

Could you make a http://jsfiddle.net/ ? It's kinda hard to understand what you're after based on our description alone.