title: Resizeable Image using twitter-bootstrap
body: <p>I am trying twitter's framework to develop my own site and I want my image to resize as the browser size is decreased. I am confused and tried everything but couldn't come up with a solution here is my structure</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="intro"&gt;
        &lt;div class="row" id="ruby"&gt;
          &lt;div class="span6" id="heading"&gt;
            &lt;h1&gt;Journey Into Ruby and Beyond&lt;/h1&gt;
            &lt;p&gt;A blog about my journey into ruby, my experiences and lots of fun!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="span6" id="pic" align="right"&gt;
             &lt;p&gt;Akash Soti&lt;br&gt;RoR Developer&lt;br&gt;@xyz company &lt;/p&gt;
          &lt;/div&gt;
      &lt;/section&gt;&lt;!--/intro--&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#ruby.row{
  
  margin-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  }
  
  #pic{
  
  background: url(img/Akash.png);
  background-repeat: no-repeat;
  height: 150px;
  width: 200px;
  margin-left: 200px;
  
  }
  
  #pic img{
  
  max-width:100% ;
      max-height:100% ;
      display:block;
  
  }
  
  #pic p{
  position: relative;
  right: 110px;
  margin-top: 90px;
  margin-left: 0px;
  text-align: left;
  }
  </code></pre>