title: Resizing image with screen size
body: <p>I am using thw folowing code:</p>
  
  <pre><code>&lt;div data-role="homepage"&gt;
      &lt;div data-role="content"&gt;   
          &lt;div id="selectCircle"&gt;
          &lt;img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"&gt;&lt;br&gt;
          &lt;img src="res/images/auto.png" alt="AutoMoto.sk" id="autoCircle"&gt;
          &lt;img src="res/images/mobil.png" alt="MobilMania.sk" id="mobilCircle"&gt;
          &lt;/div&gt;
          &lt;!-- &lt;a href = "feeds.html" rel="external" data-role="button"&gt;index&lt;/a&gt; --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the folowing CSS:</p>
  
  <pre><code>#selectCircle{
      position:fixed;
      top: 10%;
      width: 100%;
      text-align: center;
  }
  #mobilCircle{
      position:absolute;
      right: 50%;
  }
  #autoCircle{
      position:absolute;
      left: 50%;
  }
  </code></pre>
  
  <p>everything looks great when the images can have their full size. But I want them to resize with screen size change. So when I diminish browser windows or load the code on mobile (which will not let the images to display in full size) the images will resize to fit div and keep their position inside div.</p>
  
  <p><strong>PS:</strong> I have tried to display div border and it look like it has height of first image, but I want it to include also bottom two images.</p>
  
  <p><strong>EDIT:</strong> Here are links to images: <a href="http://imageshack.us/photo/my-images/255/zivew.png/" rel="nofollow">image1</a>, <a href="http://imageshack.us/photo/my-images/341/mobil.png/" rel="nofollow">image2</a>, <a href="http://imageshack.us/photo/my-images/338/autoq.png/" rel="nofollow">image3</a> and here is how I want it to looks like <a href="http://imageshack.us/photo/my-images/708/vandrackebuttony.png/" rel="nofollow">image</a>.</p>